Panel widget
This widget is based on the HTML Form field, and is intended to display any useful information to the user.
Attributes (setters)
$widgetsContainer->addWidget(
SharpPanelWidget::make('messages')
->setInlineTemplate('{{count}} unread messages')
->setLink(LinkToEntityList::make('messages')->addFilter(MessageStateFilter::class, 'unread'))$widgetsContainer->addWidget(
SharpPanelWidget::make('messages')
->setInlineTemplate('{{count}} unread messages')
->setLink(LinkToEntityList::make('messages')->addFilter(MessageStateFilter::class, 'unread'))Note that the setLink() method is expecting a LinkTo... instance.
The Panel needs a view template, that you can provide in two ways:
setInlineTemplate
Just write the template as a string, using placeholders for data like this: .
Example:
$panel->setInlineTemplate('<strong>{{count}}</strong> unread messages')$panel->setInlineTemplate('<strong>{{count}}</strong> unread messages')setTemplatePath
Use this if you need more control: give the path of a full template, in its own file.
The template will be interpreted by Vue.js, meaning you can add data placeholders, DOM structure but also directives, and anything that Vue will parse. For instance:
<div v-if="show">result is {{value}}</div>
<div v-else>result is unknown</div><div v-if="show">result is {{value}}</div>
<div v-else>result is unknown</div>Data valuation
Valuation is handled by a dedicated $this->setPanelData(string $panelWidgetKey, array $data) in the Dashboard class:
function buildWidgetsData(): void
{
$count = 36; // [...];
$this->setPanelData(
'messages', ['count' => $count]
);
}function buildWidgetsData(): void
{
$count = 36; // [...];
$this->setPanelData(
'messages', ['count' => $count]
);
}Pass there the widget key and an array with the data required by your template.