Components

Anacleto provides you with a set of graphic components that you can combine to create the windows of your application.

Each component is identified by an id it must have a type (component) and in some cases it can contain other components (components).

Properties

The properties below are available in all Anacleto components

• id [string] panel id

• component [string] panel type, ex Form

• components [array of component]an array of inner components

• containerClassName [string] component container classes separated by space

• classNames [string] component classes separated by space

• style [object] component class

• events [array of events]

Methods

The methods below are available in all Anacleto components, you can call the following method from an Anacleto componente event by using this or panelContext

this.load({})

panelsContext.myPanel.load({})

setTitle

setTitle(string title)

showToolbar

showToolbar(boolean show)

showToolbarSpinner

setIsToolbarLoading(boolean show)

Events

Each component of Anacleto makes events available, in each event you will always have the following properties available:

• this - the current component

• panelsContext- contain reference to other panels

See frontend script.

afterRender

  afterRender: function();

Toolbar

If a component has the property isCard:true then it is possible to define the buttons on the toolbar.

The toolbar is only available for panels in card mode

To do add buttons on toolbar the actions attribute must be specified with the array of buttons on the toolbar.

If you want to show sub-buttons for a button, specify them in the actions attribute.

{
  actions: [
    {
      label: "Save",
      icon: "pi pi-save",
      events: {
        onClick: {
          body : "alert(\"Save\")"
        }
      },
      actions: [
        {
          label: 'Rename',
          icon: 'pi pi-pencil',
          onClick: (event, context)=>{
            alert("TODO")
          }
        },
        {
          label: 'Delete',
          icon: 'pi pi-times',
          events: {
            onClick: {
              body : "alert(\"Delete\")"
            }
          }
        },
        
      ]
    }
  ]
}