KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Challenges I Face When Creating a Dashboard #3303

Closed Eugene opened this topic on on May 27 - 14 comments

Eugene commented on May 27

Hi, guys

Could you please explain why it is not possible to use regular HTML in the dashboard? I am not referring to CustomBoard here. Every time I develop a panel with multiple elements, I have to use constructs like Row:: and html::, and it feels like a guessing game to achieve the desired layout. This additional layer, which seems unnecessary to me, might be straightforward for the person who created it, but it is quite challenging for me.

For instance, aligning text to the left of the panel and placing two buttons side by side on the right is a simple task that I can accomplish in a minute using HTML. However, achieving the same layout in the dashboard takes me at least half an hour, causing significant frustration.

Therefore, I kindly request the option to use regular HTML on dashboard pages, perhaps in the form of templates or some other solution. This would greatly enhance usability and efficiency.

Alternatively, could you develop a converter that transforms the HTML I want to achieve into a set of instructions that the dashboard understands?

Finally, my question is how to accomplish the following:

<div class="container py-5">
        <div class="row">
            <div class="col d-flex justify-content-between">
                <span>Left aligned text</span>
                <div>
                    <button class="btn btn-primary mr-1">Button 1</button>
                    <button class="btn btn-secondary">Button 2</button>
                </div>
            </div>
        </div>
    </div>

It may be very simple, but my attempts to achieve the desired result have failed. It completely discourages me from continuing.

KoolReport commented on May 27

In the content of Dashboard, you can do this:

use \koolreport\dashboard\containers\Html;
...
protected function content()
{
    return [
        Html::div()->class("container py-5")->sub([
             Html::div()->class("row")->sub([
                Html::div()->class("col d-flex justify-content-between")->sub([
                    Html::span("Left aligned text"),
                    Html::div()->sub([
                        Html::button("Button 1")->class("btn btn-primary mr-1"),
                        Html::button("Button 2")->class("btn btn-secondary")
                    ])
                ])
            ])
        ])
    ];
}
KoolReport commented on May 27

Another way to write:

use \koolreport\dashboard\containers\Html;
...
protected function content()
{
    return [
        Html::div([
            Html::div([
                Html::div([
                    Html::span("Left aligned text"),
                    Html::div([
                        Html::button("Button 1")->class("btn btn-primary mr-1"),
                        Html::button("Button 2")->class("btn btn-secondary")
                    ])
                ])->class("col d-flex justify-content-between")
            ])->class("row")
        ])->class("container py-5")
    ];
}
Eugene commented on May 27

well, thank you

you use very direct approach but when do I have to use Inline class and width properties...

but it should be dashboard's buttons with dashboard's server actions - can I change it with your button class something like this:

Button::create('ordersBackButton')
                                            ->action('submit', function ($request, $response) {
                                                $this->sibling('myFlexView')->historyBack();
                                            }),
                                        ]),

you use very direct approach but when do I have to use Inline class and width properties...

KoolReport commented on May 27

Yes, definitely, you can alternate with Button widget with server-side action.

KoolReport commented on May 27

Another way to hack if you like "very" Html raw:

return [
Html::div("
<div class='container py-5'>
        <div class='row'>
            <div class='col d-flex justify-content-between'>
                <span>Left aligned text</span>
                <div>
                    <button class='btn btn-primary mr-1'>Button 1</button>
                    <button class='btn btn-secondary'>Button 2</button>
                </div>
            </div>
        </div>
    </div>
")->raw(true)
];
Eugene commented on May 27

how to use the dashboard buttons in the last example?

KoolReport commented on May 27

No, the last example use raw(true), it simply output all the html string inside as it is, there will be no Button widget can be used inside. The first and second way can insert Button widget.

Eugene commented on May 27

ok. thank you.

But my suggestions still stands. I have always liked your product for its simplicity and ease of use. Therefore, when I discovered that HTML content must be specified in an array using special classes, I was a little surprised. The approach of the classic koolreport's view is closer to me. :-))

KoolReport commented on May 27

Defintely, I will convey your message to dev.team, it could be in the future, they find a way to mix between normal html and the widget.

Eugene commented on May 27

I believe they can :-) thank you

Eugene commented on May 27

BDW I cannot just change Html::button to Button class.

If I want to keep the layout of the elements in one row, I have to add the Inline and place the button objects in it.

Html::div()->sub([
                          Inline::create()->sub([
                         Button::create('Button1')
                          ->type('secondary')
                            ->text('Button1')
                            ->action('submit', function ($request, $response) {
                             //action
                             }),
                              Button::create('Button2')
                             ->type('secondary')
                               ->text('Button2')
                                ->action('submit', function ($request, $response) {
                                   //action
                                 }),

                          ]),
             ]),

However, it is not entirely obvious why Html::span("Left aligned text")] should NOT be included in the `Inline' class ] even if it is in the same line with the buttons.

This is what I meant when I said that it is often not obvious exactly how to use your containers.

Perhaps this problem will disappear with experience, but for now it requires additional effort. And I think it is needed more detailed documentation with examples in style "if you want this do this..."

KoolReport commented on May 27

..

KoolReport commented on May 27

Noted. That's a good suggestion to add on documentation. You are right that dashboard's widgets are different from normal Html as we added more structure to them. The Inline class exists to help widgets of dashboard be able to stay inline. A hack way is to add "inline-container" class directly to the div above:

Html::div()->class("inline-container")->sub([
                         Button::create('Button1')
                          ->type('secondary')
                            ->text('Button1')
                            ->action('submit', function ($request, $response) {
                             //action
                             }),
                              Button::create('Button2')
                             ->type('secondary')
                               ->text('Button2')
                                ->action('submit', function ($request, $response) {
                                   //action
                                 }),
])
Eugene commented on May 27

thank you

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed
suggestion

Dashboard