Nav Bar Control

[Shibam]

The Nav Bar Control is the perfect control to help you with providing a smooth and creative Nav Bar in your mobile and web app. The Nav Bar Control is a navigational tool provided by the Studio to the users. It consists of menu items with trigger action functionality to perform certain actions like executing queries or navigating to another page or screen.

Users can create several menu items along with child menus for each of them, meaning that you can create multilevel menu items in the Nav Bar control. You can even set icons for each navbar menu item and provide properties like images, colors, and active menu items.

Most of all this control is mobile responsive and thus comes with a burger menu icon. When the page layout changes to mobile view, the whole navbar transforms into a navbar block with a burger menu item, which on click showcase all the menu items.

UI Property

Info

• Type : The Type field is automatically generated depending upon the type of control used. In this case, it is a “dhq_nav_bar” type.

• Unique Name : A Unique Name is used to uniquely identify a control in your App. Every control that is added on the screen gets an auto-generated Unique Name on the basis of the Label name given to the control.

• Label : Label is the text that is displayed above the control and helps the user to understand the purpose of the Nav Bar Control.

• Hide Label : This option hides the label of the control from the view.

• Tooltip: This allows you to add the Tooltip text that would provide a hint to the user for providing input. The Tooltip icon would be visible if you switch on the Show tooltip icon toggle property available below.

• Description: Is the description that you can add for your controls. The Description would only be visible if you switch on the Show Description toggle property available below.

• External CSS: With this property, one can imply exclusive CSS on controls. You can customize your control with CSS by selecting the correct class or id of the control. You can read more here.

• Generic :

  • Caching : When the caching option is selected and if a LOOKUP formula is applied to this control, the state that the LOOKUP returns will be cached and the user will be able to see this state of the field even when user accesses the microapp later with no connectivity. This option is required when you want your app to be accessible in offline mode as well and getting the latest data from the sheets always is not critical.

  • Hidden : The hidden option helps you to hide the field from the user. This might help to perform some computation you don’t want the user to see or if you want to show certain fields only when a specific condition is met/not met.

  • Trigger dependents: When you Disable Trigger Dependents, it helps you to reduce or optimize the unnecessary evaluation of the dependent control’s formula. For a detailed explanation refer to this article here ..By default, Trigger dependents is enabled. However, in complex apps by switching it off, you would limit the evaluation in the dependent control and in turn ensure quicker response times.

• Grid Configuration :

  • Hide on desktop: This option hides the selected control in the desktop view.

  • Hide on Mobile : This option hides the selected control in the mobile view.

  • Dynamic Height : This option dynamically increases /decreases the height of the text control based on the given content.

  • Maintain space when hidden : This option maintains the specified space between controls when a particular control is hidden. When a control is hidden the space is maintained in the preceeding control depending on the space the previous control has occupied.

Note: Dynamic height, Hide on Mobile, Hide on Desktop, Maintain space when hidden properties are used in Freeflow Editor only.

Properties

• Menu properties: You can set different properties like coloring, styling, positioning and font to the menu items present in the Nav Bar control.

  • Burger Menu Alignment: This property helps you to fix the position of the burger menu in mobile responsive view.
    

    

  • Open dropdown on: This property sets the action on which the dropdown is supposed to be visible. You can select from: Hover and Click.
    

    

  • Item Max height: This property sets the max height of each dropdown menu.

  • Menu alignment: With this property you can align menu items in the nav bar control.

• Selected Item: With this property. users can set the background and font color of the active menu item in the Nav Bar control or the menu data with the property of isActive set as true

• Dropdown color: With this property, users can set the background and font color of the submenu items in the Nav Bar control or the menu items under the options property.

  

  

How to use Nav Bar control?

Start with selecting the Nav Bar Control from the Custom section of the Controls Menu .

Data binding in Nav Bar control

1. Data: This is the data that does not change over a period of time. Such data is used to assign default values in fields in your application. The static data should be based on JSON data type of array of objects consisting of label, value, icon, and options object.

2. Controls: This allows you to get data from one of the App controls.

3. Variables & Keywords: This assigns the value of the variables and keywords defined or available in the app.

4. Query String: You can also select from the available query string to bind data to the control.

5. LoggedIn User: You can display the properties related to the LoggedIn User like username, usermail, Admin, status, and so on. You can select a single property only. Select column and click Save .

6. Connectors: This allows you to select a configured connector and call its API to fetch values and bind the values returned by the respective API. You can select multiple keys to display values.

7. Custom Formula: This can be used to apply formulas and store the output of those formulas. You can learn more about formulas here.

8. Custom JavaScript: You can also add a Custom JavaScript to fetch data and use it for your app operations.

The general format for the nav bar control to bind data is:

[ 
{ 
	"label": "Home", 
	"value": "home", 
	"icon": "icons icon-home", 
    "isActive": "true" 
}, 
{ 
	"label": "Products", 
	"icon": "icons icon-plus" 
}, 
{ 
	"label": "Categories", 
	"icon": "icons icon-grid", 
    "options": [ 
		{ 
			"label": "UI Builder", 
			"value": "builder", 
			"description": "Interface design", 
			"color": "pink", 
			"image": "https://dronamobilepublic.s3.amazonaws.com/DRONA5_Team2050/content/app/images/public/praesentiumsaepequibusdam_fYvUX.png" 
		}, 
		{ 
			"label": "Function Creator", 
			"value": "function", 
			"description": "Rules and Validation", 
			"color": "green", 
			"image": "" 
		}, 
		{ 
			"label": "Workflow", 
			"value": "workflow", 
			"description": "Project Management Tool", 
			"color": "orange", 
			"image": "" 
		} 
	] 
} 

]

In the above JSON data, you will notice that we have some common attributes and a specific format to introduce child elements/ menu items.
You can set the label name, icon, color, active property, image, value, and more using the proper format of JSON data.

NOTE: You can use class names of font-awesome as well as URL to include icons in your collapsible menu.

NOTE: The data/value of the Value attribute in the JSON data is returned on select of its respective menu item.

Add event to Nav Bar control

With Nav Bar control event handling is also possible from the Events section. There is an event available of value_select which can be used to add actions on select of menu options from the nav bar control.

As we know that the return value supported by the Nav Bar is the value attribute, this can be used as passing keywords in various sorts of actions available in the Studio.

Let’s see how to implement actions to the event binding section of the control.

Click on Events and select the value_select event.

You can add any action you want. We will be using the TOAST action here. You can bind the keyword of the Nav Bar control in the Message to showcase the returned value in the Toast action from the control.

Click Continue and Finish.

Preview the app and select any menu option from the Nav Bar control and you will notice a pop-up with value selected in the control.

Nav Bar control – Variations

The Studio provides you with some additional variations of Nav Bar control. You can find it in the control list itself. These are the few navbar options made pre-ready for the users.

• Simple Nav bar
• Icon Nav Bar
• Image Nav Bar