Cards
Role-based access to your data 🃏
Here, take a look at this short Demo of the component.
Component Overview
The Cards component serves several purposes:
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
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 (the main one). It defines the objects to display in the component. There can 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 the data structure configuration
Card Header Comment: This is the subheader in the card. It can by any field (available for reading in the API-endpoint) like string, number, email, date, link, arrayLink
Card Text: This is the text in a card. It can be any field (available for reading in the API-endpoint) like string, number, email
Card Color: Allows you to select the color of the card. There are following options of coloring the card:
No coloring
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 to include picture to the card). It can be any field type 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
In this section, you can organize the fields in an object card using Tabs (Sections), adjust the field order and configure fields settings.
A field can have one of the following settings:
Read-only
Write-only
Read and write
These options depend on the details of your API endpoint. If there are fields available for writing, users will see them as inputs and will be able to edit and save them.
It's important to remember that you must include the ID field, which should be available for both reading and writing, to make the object editable.
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.
Hint: If you want your data to be updated online, consider using synchronous scenarios and the option 'Close popup at clicking.'
Next, you need to select an API endpoint for writing data. It can be the main one or another relevant endpoint. You will choose fields from that API endpoint that are available for writing to set up the form and automatic mapping.
You can also decide whether to call the action from the main object card or from a linked object card.
Automatic Fields Mapping
On the left side, choose fields to be filled (from the API-endpoint).
On the right side, choose one of the following options:
Constant. (e.g.
true
or12
)Object card. Fields from object we've opened.
User ID. If user is authorized. 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
Actions can be conditionally displayed depending on user roles or current field values.
The following options are available for conditionals:
User's
ID
equals a constant valueUser'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 trueObject
field
equals to a particularconstant
Linked object
field
equals to a particularconstant
(for actions called from linked cards)
Last updated