# Cards (legacy) ![](/files/-MHLC_1UsdlTtcFaCmJZ) Here, take a look at this short [Demo](https://library.directual.app/books) 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 ![](/files/-M_uXTFJXB0LLrWxtAh4) * [**General**](/web-pages/components/legacy-components/cards.md#general-cards-view-settings)**:** Settings like API-endpoint, title, page size * [**List**](/web-pages/components/legacy-components/cards.md#list-appearance-settings)**:** Settings of the list appearance view * [**Object**](/web-pages/components/legacy-components/cards.md#object-view-settings)**:** Settings of the object view * [**Actions**](/web-pages/components/legacy-components/cards.md#actions)**:** Settings of the component actions ## General Cards View Settings * [API-endpoint](/api-integrations/api-endpoints-security-layer.md) (the main one). It defines the objects to display in the component. There can be additional API-endpoints for posting objects via [Actions](/web-pages/components/legacy-components/cards.md#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](/files/-MN3lHShaUyZPuAxgRde) * **Card Header:** You can't choose the header from here, because throughout the system, the [structure visible name](/data/data-structures.md#structure-visible-name) plays role of the object title. You can configure it from the data structure configuration * **Card Header** C**omment:** 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)](/files/-MN3zaRWngTlK5MxIGPL) 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](/files/-MN4RWLC4eCiSEgwxUP7) {% hint style="warning" %} 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. {% endhint %} ## 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 style="info" %} Hint: If you want your data to be updated online, consider using [synchronous scenarios](/scenarios/synchronic-scenarios-1.md) and the option 'Close popup at clicking.' {% endhint %} 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](/web-pages/portal.md#portal-settings) 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) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://readme.directual.com/web-pages/components/legacy-components/cards.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.