Skip to main content
Version: Next (5.0)

Messages and info

Two groups of small components that talk to the user. Messages are what a screen says after an action: a confirm dialog before a risky one, and the toasts and the messages over a field that the server sends in its answers. The info components (info, info-button and info-criteria) are the compact controls of the header: a value with a dropdown, a button and a criterion that sit next to the title.

note

Dialogs, toasts and dropdowns are drawn over the whole page, outside the preview, so they follow the colour mode of the site and not the one of the Light / Dark switch of the preview.

Message​

A message element defines a text once, usually in the hidden part of the screen, so that any button can use it. A confirm action shows it in a modal dialog: Accept goes on with the actions that follow the confirm (a save, a delete) and Cancel stops them. The stage has the button that raises it, as the XML shows. Press it and change the texts.

Live preview
XML
<message id="DeleteMsg"
         title="Delete the customer?"
         message="The customer and its orders will be deleted." />
<button id="AskDelete"
        label="Delete customer"
        icon="lucide:trash-2"
        style="btn-danger">
  <button-action type="confirm" target="DeleteMsg" />
</button>

The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference

AttributeControlValues
titleTitletext
messageMessagetext

Info​

An info is a rounded button of the header. Its label can come from a query or from the session, and a unit adds a badge. When it has content, a click opens it in a dropdown; with an action instead, a click runs the action.

Live preview
XML
<info id="demo" label="Notifications" icon="lucide:bell" unit="3">
  <tag type="p" label="You have 3 unread notifications." />
</info>

The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference

AttributeControlValues
labelLabeltext
iconIconlucide:belllucide:maillucide:circle-helplucide:user
unitBadgetext
tagDropdown with contenttrue / false

Recipes​

Header controls​

The three info components together: an info with a dropdown, an info-button that runs actions (here it opens a dialog) and an info-criteria, a criterion in the style of the header.

<info id="Alerts" label="Notifications" icon="lucide:bell" unit="3">
  <tag type="p" label="3 invoices are overdue." />
</info>
<info-button id="HelpBtn" label="Help" icon="lucide:circle-help">
  <button-action type="dialog" target="HelpDlg" />
</info-button>
<info-criteria id="Find" component="text" label="Find" placeholder="Customer or invoice" />

<dialog id="HelpDlg" label="Help" style="modal-sm">
  <tag type="div" style="modal-body" label="Search by customer name or by invoice number." />
  <tag type="div" style="modal-footer">
    <button id="CloseHelp" label="Close" style="btn-primary">
      <button-action type="close" target="HelpDlg" />
    </button>
  </tag>
</dialog>

Toasts from the server​

Most messages are not written in the screen: the server answers an action with a message action and the client shows it as a toast. Its type (ok, info, warning or error) sets the look and how long it stays: the first three fade out, an error stays until it is closed. Each button here sends a server action; the docs have no server, so the example answers each one with the actions in the table, as the server would.

<button id="Save" label="Save" style="btn-primary">
  <button-action type="server" server-action="maintain" target-action="SaveCustomer" />
</button>
<button id="Sync" label="Synchronise">
  <button-action type="server" server-action="maintain" target-action="SyncCustomers" />
</button>
<button id="Check" label="Check the limit">
  <button-action type="server" server-action="query" target-action="CheckLimit" />
</button>
<button id="Charge" label="Charge" style="btn-danger">
  <button-action type="server" server-action="maintain" target-action="ChargeCustomer" />
</button>
Target actionMessage the server sendsType
SaveCustomerCustomer saved: The changes were saved.ok
SyncCustomersSynchronising: 12 customers are being updated.info
CheckLimitCredit limit: The customer is close to the limit.warning
ChargeCustomerPayment refused: The bank rejected the payment.error

A message over a field​

A target-message shows the message in a popover over the component it is about, so the user sees which field to fix. The answer names that component in its address. If it is not on the screen, the message is shown as a toast.

<criteria id="CustomerEmail" component="text" label="Email" placeholder="name@company.com" icon="lucide:mail" />
<button id="Verify" label="Verify" style="btn-primary">
  <button-action type="server" server-action="validate" target-action="CheckEmail" />
</button>

The server answers CheckEmail with a target-message of type error addressed to the criterion CustomerEmail.

Events and actions​

An info and an info-button store their click event when the user clicks them, so a dependency can react to it. The messages have no event: the actions below are the ones that show them. A message that is a toast finishes its action when it fades out or is closed, so the actions that follow it wait for it; a confirm finishes it with Accept and cancels the stack with Cancel.

ActionDescription
confirmShows the message named in target in a confirm dialog
messageShows a toast (sent by the server): type, title and message are in its parameters
target-messageShows a message over a component (sent by the server); a toast if the component is not on the screen

More​

Edit this page
Last updated on by Pablo Javier García Mora