Using components in your app - Vertical Nav Bar

In this lesson you will learn how to bring lowcodera components to your app. For this matter we will use Vertical Nav Bar Component.

Vertical Nav Bar

Nav bar will guide the user through the app

The Nav Bar Collection

To create nav bar items we must provide a collection following the standard below. This is a simple JSON schema with 4 properties.

Property	Description
type	Is it action item or dropdown
title	Defines the name to be shown in the bar
icon	Defines the icon
key	key to be used in powerfx formulas

Copy and paste the below snippet at OnStart property

ClearCollect(
    globalnav,
    {
        type: "Action",
        title: "New task",
        icon: "object-group",
        key: "newtask"
    },
    {
        type: "Action",
        title: "Dashboard",
        key: "dashboard",
        icon: "chart-line"
    },
    {
        type: "Action",
        title: "List view",
        key: "list",
        icon: "list"
    },
    {
        type: "Action",
        title: "Kanban",
        key: "kanban",
        icon: "address-card"
    },
    {
        type: "Action",
        title: "Roadmap",
        key: "roadmap",
        icon: "map"
    }
);

Properties used on the app

To achieve the same behavior and design please set your component as per below

Property	Value
Background Color	#4FB0C6
Collapsed Width	70
Font Color	#ffffff
Width	240
Icon Color	#ffffff
Options(items)	globalnav

Using NavBar to perform actions

This feature will be cover later on as we have more screen to navigate

For more info about this component please check the documentation https://docs.lowcodera.com/ui-components-1/progress-bar