# Step 2: Approving Features ## Step 2.1: Role-Based Access and Tags Management {% embed url="" %} 8:57 {% endembed %} 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 * Conditions on [pages, tabs, sections](https://readme.directual.com/web-pages/setting-up-pages-layout) and [actions](https://readme.directual.com/web-pages/components/legacy-components/cards#actions) within object cards. Let's create a page called 'Tag Management,' which is only accessible to users with the 'admin' role. ![Page Access & Security settings](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MaU_-O4JqO-gE1rLrbt%2F-MaXgHAJEWUzLikDv0y3%2Ftags_page.jpg?alt=media\&token=7dd0e0d7-085d-4e1e-a466-6e70a4050ccd) ![API-endpoint conditions on user's session](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MaU_-O4JqO-gE1rLrbt%2F-MaXgLiCs-Skuic-00wL%2Ftags_sl.jpg?alt=media\&token=caab9661-2124-4e3a-a0a5-604ee51727a4) ![Tags management page](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MaU_-O4JqO-gE1rLrbt%2F-MaXglVO6NLSKxWz3Wl2%2Ftags_fps.jpg?alt=media\&token=ea55df7c-df75-48ea-9b15-09bb96865bb3) #### 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) * Run a [synchronous scenario ](https://readme.directual.com/scenarios/synchronic-scenarios-1)that checks the value of the {{delete}} field. If it equals true, the object is deleted. ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MaU_-O4JqO-gE1rLrbt%2F-MaXhtd45RORBMXUz0x9%2Fsync_delete.jpg?alt=media\&token=f124c21c-7502-4a75-a9e9-54d16271b865) ## Step 2.2: Features Management, Cards Colors, Profile {% embed url="" %} 16:31 {% endembed %} 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. ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MarudqdV7kGKWTrKhc9%2F-Mas4lIRAQYAfV4pv8a7%2Ftabs.jpg?alt=media\&token=ef6b74ed-f3c3-484b-9409-464ebdf58feb) 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'. {% hint style="info" %} 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 (=). {% endhint %} ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MarudqdV7kGKWTrKhc9%2F-Mas5AwPI7pXJvBhOQ7x%2Fapi.jpg?alt=media\&token=d5f6c21f-d789-4927-b284-773c394135c8) 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. ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-Mas5df34PUJrpbAtkzO%2F-Mas6eR84_bvQNU_gZkJ%2Fcolour.jpg?alt=media\&token=7398a392-7207-417e-8274-3ee5f6786612) #### 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 [coloring type](#user-content-fn-1)[^1]. ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-Mas5df34PUJrpbAtkzO%2F-Mas7XAtH1uJkao2IRIo%2FUntitled-2.jpg?alt=media\&token=09e4b4fc-05b2-44e0-b3c1-626d355f1925) #### Configure Profile Page We create an API endpoint for the "App users" (WebUser) data structure and set the filter to "id == id." ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-Mas5df34PUJrpbAtkzO%2F-Mas8WpG2nuYrdUB-fAw%2Fapi-prof.jpg?alt=media\&token=0969a727-9d65-42bc-8c58-1a49491d1a01) 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. ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-Mas5df34PUJrpbAtkzO%2F-Mas8nf3LLI7v1uvGSH9%2Fprofile.jpg?alt=media\&token=5c320764-0ce3-4990-b99f-f1aed54db40c) ## Step 2.3: Configuring Actions in Cards, Status Management {% embed url="" %} 16:45 {% endembed %} 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. ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-Mas8r5hdD8ogxa3qi85%2F-MasBEFEps0Mcaj9cJAZ%2Factions.jpg?alt=media\&token=2a9a0884-fd64-487f-b7e5-aadbeadc6874) 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 {% hint style="info" %} 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. {% endhint %} ![Example of Action's Automatic fields mapping and Conditionals](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-Mas8r5hdD8ogxa3qi85%2F-MasD3V_LR4S0Qci-d9i%2Faction_details.jpg?alt=media\&token=81bb51ea-295b-4cf7-9d73-6fffa9d7c1e3) 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 {% embed url="" %} 8:45 {% endembed %} We are creating a new page, and to make it public, we need to override the portal security settings for that specific page: ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-May9tpT3Sh8fKfZXgNh%2F-Mayo29dwkDR4CAbfOYN%2Fss.jpg?alt=media\&token=66d3df0c-8767-4f81-af3f-ca31efc85019) The page will contain three cards components as columns: ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-May9tpT3Sh8fKfZXgNh%2F-Mayo9Hkpe4wa1nws18v%2Fodr.jpg?alt=media\&token=efdc3beb-c4d5-44af-876f-84f87f048a01) Also, let's set a custom [portal appearance](https://readme.directual.com/web-pages/portal#appearance) and upload a logo page using the [File upload structure](https://readme.directual.com/data/file-storage). ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-May9tpT3Sh8fKfZXgNh%2F-MayoWvvb1Mv8E6etwHe%2Ftheme.jpg?alt=media\&token=27ae71cb-0434-4c23-8c8d-f8a08b9c4ba7) {% hint style="info" %} 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. {% endhint %} [^1]: