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
  • Step 2.1: Role-Based Access and Tags Management
  • Step 2.2: Features Management, Cards Colors, Profile
  • Step 2.3: Configuring Actions in Cards, Status Management
  • Step 2.4: Creating Public Development Roadmap

Was this helpful?

  1. Directual step-by-step
  2. Public Development Roadmap

Step 2: Approving Features

Step duration ~40 min

PreviousStep 1: Requesting FeaturesNextStep 3. Upvoting Features

Last updated 1 year ago

Was this helpful?

Step 2.1: Role-Based Access and Tags Management

Users are stored in the system data structure 'App users' (WebUser), and within the 'role' field, we can store roles as a comma-separated list, like 'admin', 'user', 'moderator'.

Role-based security control is established through the following settings:

  • API-Endpoint Security Layers - Conditions on the user's session, where we can set up conditions based on any fields of the user (from the WebUser object), including roles

Let's create a page called 'Tag Management,' which is only accessible to users with the 'admin' role.

Removing Objects

We cannot remove an object directly through the API endpoint, as it's designed this way for consistency and security reasons. However, if it's necessary, we can achieve this through scenarios. Here's how:

  • Add a new field called {{delete}} with a boolean data type

  • An action on the object card will set this field to true (make sure to specify {{id}}, as failing to do so will result in the creation of a new object)

Step 2.2: Features Management, Cards Colors, Profile

Let's configure the Features management page. Go to the Web-pages section and create a new page. Next, add four tabs to the page:

  • Approved features

  • Suggested features

  • Released features

  • Declined features.

Go to the API section and add a new API endpoint for 'Suggested Features.' This endpoint should be available for authorized users with a role such as 'admin'.

Note that the field 'role' can contain several roles separated by commas (e.g., 'admin, moderator, user'). This is why we use the 'like' operator, not the equal operator (=).

Let's add some colors! Objects with 'type' equal to 'bug' should be displayed in red, while objects with 'type' equal to 'feature' should be displayed in green. To do this, go to the configuration of the 'Features' data structure and add a new field named 'color' with a data type of 'color' (string).

Next, we need to create a scenario to populate this new field. Since we already have a scenario for processing all new objects in the 'Features' data structure, we can simply edit it.

Checking Field Type

  • If the 'type' is equal to 'bug,' then set the 'color' field to 'e33636' (which represents red in HEX)

  • Otherwise, set the 'color' field to '1ed627' (which represents green in HEX).

In the configuration of the Cards component, select the .

Configure Profile Page

We create an API endpoint for the "App users" (WebUser) data structure and set the filter to "id == id."

Next, go to the configuration of the Profile web page and add a Form component. Turn on the option for editing objects and use the user's ID.

Step 2.3: Configuring Actions in Cards, Status Management

Next, we'll configure actions in the Cards component. First, let's create an API endpoint for setting the development status, request status, and decline reason.

Then, on each tab on the Feature Management page, we set up Cards with actions:

Actions on the Approved Features tab:

  1. Put back to backlog. feature_status → new, development_status → ; Conditional: development_status == planned

  2. Choose for development. development_status → under_development; Conditional: development_status == planned

  3. Remove from "under development". development_status → planned; Conditional: development_status == under_development

  4. Release. development_status → released; Conditional: development_status == under_development

Remember, if we want to edit an object via an action, we have to specify the object's ID, which is usually taken from the object card.

Actions on the Suggested features tab:

  • Approve. feature_status → approved, development_status → planned

  • Decline. feature_status → declined, decline_reason → take from the form

Actions on the Declined features tab:

  • Put back to Backlog. feature_status → new, decline_reason→

Step 2.4: Creating Public Development Roadmap

We are creating a new page, and to make it public, we need to override the portal security settings for that specific page:

The page will contain three cards components as columns:

Remember that the API endpoints for that public page should also be public, meaning there shouldn't be any conditions on the user's session.

Conditions on and within object cards.

Run a that checks the value of the {{delete}} field. If it equals true, the object is deleted.

Also, let's set a custom and upload a logo page using the .

synchronous scenario
pages, tabs, sections
File upload structure
8:57
16:31
16:45
8:45
portal appearance
Page Access & Security settings
API-endpoint conditions on user's session
Tags management page
Example of Action's Automatic fields mapping and Conditionals
actions