Layers

a. Layer section contains Login and Main

(i) By clicking on login, you can go to the login page. (Coming soon: modify the login page content.)

(ii) Main: 1. Menu (Header and/or Sidebar): This layer would be used for creating a navigation link 2. Pages (list of pages, click on the page to see the content)

(iii) How to navigate: Use up and down arrows to select vertically. Use the left arrow to select the parent and the right to select the children.

(iv) To move the layers vertically, hold the shift key with “up” or “down” arrow keys.

(v) To move the layers in and out of a container, shift + “Right” or “Left” respectively.

(vi) Press “A” to add an empty container to the selected container.

(vii) To delete a container, press “Backspace” or “Delete”.

b. Config Panel:

(i) TailwindCSS class editor: Applied TailwindCSS Class of the selected element. Add/remove custom TailwindCSS classes. “Shift“ + “Enter” to apply classes or “Escape” to cancel.

(ii) Add Filters: Applicable to “get_many” Models for adding filters such as static filter & runtime filter.

(iii) Sort & Limit: Applicable to “get_many” Models for adding filters such as static filter & runtime filter.

(iv) Actions: Actions provide the interaction of an element such as “Navigate to page”, “Login/Logout”, “Toggle”, “Alert”, “Toasts”, etc.

1. To apply the action, select an element & click on the plus button under the actions tab, then select the actions from the dropdown. To remove it, click on the cross icon. One element can have multiple actions.

2. List of Actions:

a. Celebrate: This action property allows you to add a celebration or visual feedback when a specific action is performed. b. Toast: Use this to add feedback or a notification when an operation is executed. It can display messages, or information to the user. c. Alert: Generate alerts or pop-up notifications to communicate important information to the user. d. Increment: Automatically increases the value of a variable or field, often used for counting or tracking purposes. e. Formula: Perform mathematical or logical operations on variables, allowing for calculations and transformations. f. Accordion: Create an accordion-style interface to hide or reveal content sections with a click, providing an organized user experience. g. Dropdown: This action property allows you to create dropdown menus, typically used for selecting options from a list. h. Add prop item: Add a new input to an existing data prop of a model. i. Delete prop item: Remove an input of an existing data prop of a model. j. Delete prop: Delete an entire property or field from a data structure. k. Go to page: Navigate to a different page or section within your application or platform. l. Apply updates: Apply changes or updates to a set of data or records. m. Get next: Retrieve the next item or record in a sequence, used for pagination. n. Get prev: Retrieve the previous item or record in a sequence, used for pagination. o. Apply filters: Apply filters or conditions to data, allowing you to refine or narrow down. p. Login: Initiate a user login process, providing access to protected areas of the platform. q. Logout: Log the user out, ending their session and revoking access to secured areas. r. Onclick toggle s: Toggle the state or visibility of an element or property when clicked. s. Onclick set s: Set the state or value of an element or property when clicked. t. Onclick emit m: Emit or trigger a custom event or message when a user clicks on an element or interacts with a specific part of the application.

(v) Update: Coming Soon

(vi) Name: Change the name of the selected container on “Shift“+ “Enter” to apply or “Escape” to cancel.

(vii) Style: View and Change the style of the selected container on “Shift“+ “Enter” to apply or “Escape” to cancel.

(viii) Operation (OP): Properties specific to data models such as Create one, get many, get one, etc.

(ix) Condition: Properties specific to the roles, visibility of an element based on the applied conditions such as “If element “A” has applied only admin condition, then users logged in as Admin can see the element “A” ”

(x) Advanced: a. HTML Component: View or modify the selected container’s HTML. “Shift + Enter” to apply custom HTML or “Escape” to cancel. b. React Component: View or modify the selected component’s React code. “Shift + Enter” to apply a custom React code or “Escape” to cancel.