Extensions - Control Designer(Walkthrough)

DronaHQ Studio provides a powerful tool of Control Designer. This enabled the users to create, design, and modify their controls with a variety of options available at their fingertips. This includes creating elements, providing states, giving styles, writing CSS, and more.

This feature is available on DronaHQ Studio with the Business plan and above.

Creating a new control using Control Designer

Go to DronaHQ Studio and click on Extensions > Control Designer.

It will open up a new tab for the control designer. Here you can add a new control, search your previously made controls.

Provide the details for your new control.

  • Unique name: Fill this section to provide a unique name to your control so that it doesn’t match up with others.

  • Display name: This will be the name visible on the dashboard.

  • Search tag: It will be used as keywords to search your control from the list of many.

  • Group: To collect the controls in specific groups.

  • Choose icon: Provide an icon for the newly created control.

Control Designer – Dashboard

In the dashboard, we get multiple-choice to create and modify controls, which can be used in our app.

  • image: We can work on different layouts to build our control, such as in desktop, laptop, mobile landscape, and mobile portrait mode.

  • image : This enables users to write their own CSS and HTML code for creating controls.

  • image : This is to create new controls.

  • image: This is the save button, to save the design of the control at any point so that the user can work on it again from the last saved modification.

  • image: Once done with the creating of control, users can update the control from this button and it will reflect on their app on DronahQ Studio.

  • image: This is Blocks, here we get basic layouts and elements to choose such as grids, buttons, containers, and more.

Here we have:

Layout- in this area you can find options to create a container, grid, and column objects. Every item here can be resized and edited.

Basic- in this area you can find a few basic and widely used elements such as Navbar, image, text, button, and more. All these are to be inserted in any of the layouts. They can be edited further according to the user’s choice.

NOTE: Designer enables you to customize look and feel and can add various click events and data-bind options. However, input controls aren’t supported yet.

When you select any of the above from layout and basic you get to work with Style Manager and Mapping manager

  • Layer Manager: Here you can see the layers of elements that are being used, you can make them hide from here too.

  • Mapping Manager: In this section, you can add actions and bindable. This can be used to define certain actions for the selected items to fire under certain conditions as well as to bind them with specific data.

  • Style Manager: Style manager is useful to design the whole control. It has different sections to provide position, size, typography, border & background, effect,, and display settings. In addition to this, we can also set states to the control and provide different modifications for different states.

Here we many options to create changes to our control, some are:

Classes: Here you can give a class name to your elements. This can be used to provide an attribute that specifies one or more class names for an HTML element.

States: This is to set the state to our control or element. This can be used to show changes based on certain conditions implementing the change of state and every state having distinctive features.

To understand the working of control designs and states feature, briefly, you can watch our video on States in Designer

General: Here you can set the display option and its float direction.

Position: You can set the position of the element here giving static, relative, absolute, and fixed as options.

Effects: You get the option to provide effects to your elements such as its transparency, transition, transformation, and perspective.