Cards
Role-based access to your data 🃏

- Display data;
- Edit data (posting objects via multiple API-endpoints);
- Support role-based access control.

- 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);

Example of a grid view cards with picture (on the left option) and counter
- 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.
- Card colour. Choose the field type of colour. There are following options of colouring the card:
- No colouring;
- Stripe on the left side;
- Border;
- Fill the whole card.
- Show counter on the card (
OFF
by default).- Counter field (type of number);
- Counter text (e.g. 5 requests)
- Layout:
grid
view orlist
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).

Example of a card with two tabs and an action (form)
Here you can organise the fields in an object card using Tabs (Sections), fields order and fields settings.
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:

Example of a Card with fields available for writing
Remember, that you have to include
ID
field available both for reading and writing to make the object editableUsing 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.
Hint: use synchronic scenarios and option 'Close popup at clicking' if you want your data be updated online.
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.
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
or12
) - Object card. Fields from object we've opened.
- Linked card. Fields from linked object. Available only if we put action in the linked card (link or arrayLink field)
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
containsadmin
). You can list several roles (e.g.role1,role2
), and if the user has at least one of them, conditional returns true. - Object
field
equals to a particularconstant
- Linked object
field
equals to a particularconstant
— for actions called from linked cards.
Last modified 2yr ago