Component demo​

Purposes of the component

• Display data;

• Edit data (posting objects via multiple API-endpoints);

• Support role-based access control.

Component Settings sections

• ​General. Settings like API-endpoint, title, page size or Hidden flag.

• ​List. Settings of the list appearance view.

• ​Object. Settings of the object view.

• ​Actions. Settings of the component actions.

General cards view settings

• ​API-endpoint. (Main one) That defines the objects to display in the component. There could be additional API-endpoints for posting objects via Actions​

• List title;

• Page size (10 by default);

List appearance settings

• Card header. You can't choose the header from here, because throughout the system the structure visible name plays role of the object title. You can configure it from data structure configuration.

• Card header comment. The subheader in the card. Any field (available for reading in API-endpoint) type of string, number, email, date, link, arrayLink.

• Card text. The text in the card. Any field (available for reading in API-endpoint) type of string, number, email.

• Show counter on the card (OFF by default).

  • Counter field (type of number);

  • Counter text (e.g. 5 requests)

• Layout: grid view or list view (grid by default).

• Include picture to the card (OFF by default).

  • Picture URL (if you turn ON the option of including picture to the card). Any field type of file, available for reading.

  • Place to display the picture in the card:

    • No picture;

    • On the left (the option picture size is available);

    • On the top (the option picture size is available);

    • On the left, circled (the option picture size is available);

    • As a background.

  • Picture size (100px by default).

Object view settings

Here you can organise the fields in an object card using Tabs, fields order and fields settings.

Settings depend on the field type:

• string

  • display as:

    • plain text,

    • ​markdown,

    • hint (coloured text box)

      • alarm color (orange)

      • OK color (green)

      • error colour (red)

    • web-link

      • link text (optional)

• file

  • display as a picture

    • picture form: circle or square;

    • picture size

• json

  • the same as in Form​

• date

  • date only

  • date + time

• link/arrayLink

  • clickable objects (only at the first level of cards);

    • linked card header (in addition to an object visible name)

    • configuring linked card fields.

  • quick search option (for fields available for writing). Same mechanism as in Form​

A field can be one of these:

• Read only

• Write only

• Read and write

Those options depend on your API-endpoint details. If there are fields available for writing, the user will se them as inputs and will be able to edit and save them:

Actions

Using Actions you can:

• Update current object

• Update linked objects

• Create new objects

There are two types of actions:

• Button (if it uses the main API-endpoint, it can be included into dropdown menu)

• Form

You also can turn on closing a popup when performing an action.

Next, you choose an API-endpoint for writing data. It can be main one, or the other. You will choose fields from that API-endpoint (available for writing) setting up form and automatic mapping.

And you can choose wether to call action from main object card or from linked object card.

Automatic fields mapping

On the left side we choose fields to be filled (from chosen API-endpoint).

On the right side we choose one of the following options:

• Constant. (e.g. true or 12)

• Object card. Fields from object we've opened.

• User ID. If user is authorised. Remember, you can make users log in for accessing the page.

• Linked card. Fields from linked object. Available only if we put action in the linked card (link or arrayLink field)

Conditionals

The actions may be conditionally displayed depending on user role or current field values.

There are following options for conditionals:

• User's ID equals a constant value;

• User's ID equals to object field value (or to linked object field value, if an action is called from it);

• User role contains some value (e.g. role = admin,manager contains admin)

• Object field equals to a particular constant

• Linked object field equals to a particular constant — for actions called from linked cards.