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

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 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 or list 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

Example of a card with two tabs and an action (form)

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.

Example of a Card with fields available for writing

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 or 12)

• 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 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). 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 particular constant

• Linked object field equals to a particular constant (for actions called from linked cards)