Documentation
AcademyCommunitySign In
  • 👋Overview
  • 💙Platform Features
  • Getting started
    • 🚪Signing up & Logging in
      • 👤Profile Settings
    • 🎛️App Management
    • ✴️Templates to Start With
      • Basic Template (Blank app)
      • CRM Template
    • 👨‍🎓Learning Directual
      • 👨‍🏫Webinars
  • Data base
    • Data Structures
      • System Structures
    • Data Types
      • Markdown Cheat Sheet
      • Indexing Fields
      • Formatting Date/Time
    • Directual Query Language (DQL)
    • Import and Export
      • Import API
    • File Storage
      • API for File Storage
  • API and integraions
    • API-Endpoints
      • Advanced techniques for GET and POST requesting
        • Paging for GET-requests
        • Dynamic sorting for GET-requests
        • Custom filtering parameters for GET-requests
        • Advanced filtering for GET-requests
        • Formatting response for GET-request
        • Fields validation for POST-requests
        • Synchronic scenarios for POST-requests
        • Cross-Origin Resource Sharing CORS
      • API testing and debugging
      • Coding mode (raw mode) in filters
      • Swagger specification
    • Webhooks
    • Authentication API
      • Login/password
      • OpenID connect
      • Facebook oAuth
      • Google oAuth
    • Security Features
    • Other Integrations
      • OpenAI
      • Integration Hubs
        • Zapier
      • Telegram
        • Telegram: Advanced Techniques
      • Email
        • SMTP
        • Gmail
      • Twilio SMS
      • Airtable
      • Coupler.io
      • Other No-Code Tools
        • Bubble.io
          • Authorization
          • Displaying Data from Directual on Bubble
        • Adalo
        • UI bakery
        • Tilda
        • AppGyver
  • App interface
    • Web-App Builder basics
    • Web-App Settings
      • General web-app settings
      • Main menu
      • Creating a logotype
      • Web-App color scheme
      • Web-app typography
      • White Labeling
      • Web-App Icon
      • Custom Domain
      • Custom code
    • Setting Up Page Layout
      • Subpages and URL Parameters
    • Components
      • Multistep Form
      • Cards
      • Table
      • Kanban
      • Chart
      • Markdown text
      • HTML code
      • Hint
      • Link Button
      • Video
      • Form (outdated)
    • Embedding Pages
  • Scenarios
    • Understanding Directual Scenarios
      • Directual Event Model
    • Event-Based Triggers
    • Scheduled Triggers
      • Cron Format
    • Synchronous Scenarios
    • Editing Scenarios
      • System Steps
        • Start step
        • Delay step
        • Comment step
        • Catch error step
        • Link scenario step
        • Exit step
      • Action steps
        • Edit object step
        • Create object step
        • Search objects step
        • JSON step
        • Delete object step
        • Run report step
        • Generate document step
        • JS SDK step
      • Condition steps
        • Condition step
        • A/B test step
        • JS SDK condition step
      • Integration steps
        • HTTP-request step
        • Zapier step
        • Telegram step
        • API response
        • Email step
        • SQL-request step
        • Queue step
    • Using Variables
      • Global Variables
      • Context Variables (scenario parameters)
    • Testing and Debugging
    • System Scenarios
    • Advanced Scenario Settings
  • Template system
    • Templating Principles
      • Templating Techniques for Scenarios
      • Templating Techniques for Web-pages
    • Coding Mode (evaluating as a JS-expression)
    • Comparison Component
      • Regular Expressions
    • Tips for Dealing with Data
  • Telegram
    • Telegram
  • Plugins
    • 🔌Using Plugins
      • Scenario Steps Plugins
      • Web Plugins
      • User Authentication Plugins (Not Web3)
        • TMA (Telegram Mini App)
        • Google OAuth Plugin
        • Facebook OAuth Plugin
        • Open ID Auth Plugin
      • Blockchain (Web3)
        • TON (The Open Network)
        • Polygon
        • Ethereum
        • NEAR Protocol
        • NFT and Smart-Contracts
        • MetaMask Wallet
        • WalletConnect
      • WebSockets (Socket.IO)
    • 🪚Developing Plugins
      • Developing Scenario Plugins
      • Developing Web-plugins
        • Example: Using Chart.js in Directual
        • Example: Building Simple Form
        • Example: TON plugin
  • Teams
    • Teams
    • Sandbox Apps
  • JavaScript SDK
    • Directual + JavaScript SDK: The Basics
    • Internal $D Methods
    • Using Google Sheets
    • JS SDK: Examples
  • Reports
    • Reports
  • App life cycle management
    • App Versions
  • Directual 💙 React JS
    • Directual + React JS
  • Pricing and billing
    • 💳How Billing Works
    • 🎁Promo Codes
    • Pricing Plans for Apps
    • Team Pricing Plans
    • How we count requests and operations
    • On-Demand Resource Consumption
    • 🤝Affiliate Program
  • Hire a Directual expert
    • 🏆Certification
    • 🤝Matching with Experts
    • 🏦Escrow service
  • Security and stability
    • 🛡️Public Cloud
    • Platform Architecture
  • Support
    • 📬Contact Directual
  • Directual step-by-step
    • Public Development Roadmap
      • Step 0: Planning App Architecture
      • Step 1: Requesting Features
      • Step 2: Approving Features
      • Step 3. Upvoting Features
      • Step 4. Watching Features
    • Weather Forecast App
    • Web3 Marketplace on Polygon
    • Transferring NFT
Powered by GitBook
On this page
  • Component Overview
  • Component Settings Sections
  • General Cards View Settings
  • List Appearance Settings
  • Object View Settings
  • Actions
  • Automatic Fields Mapping
  • Conditionals

Was this helpful?

  1. App interface
  2. Components

Cards

Role-based access to your data 🃏

PreviousMultistep FormNextTable

Last updated 1 year ago

Was this helpful?

Here, take a look at this short 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 Cards View Settings

  • List title

  • Page size (10 by default)

List Appearance Settings

  • 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

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.

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.

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

: Settings like API-endpoint, title, page size

: Settings of the list appearance view

: Settings of the object view

: Settings of the component actions

(the main one). It defines the objects to display in the component. There can be additional API-endpoints for posting objects via

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

Hint: If you want your data to be updated online, consider using and the option 'Close popup at clicking.'

User ID. If user is authorized. Remember, you can for accessing the page.

synchronous scenarios
General
List
Object
Actions
API-endpoint
Actions
Demo
Example of a grid view cards with picture (on the left option) and counter
Example of a card with two tabs and an action (form)
Example of a Card with fields available for writing
structure visible name
make users log in