From a DAZZM application, press F2 or Fn+F2 to open the no-code platform. This powerful tool is composed of 4 main panels, and when an icon from the left side of the platform is blue, its associated panel is displayed. The folder icon opens the Project Explorer. It’s the section where the data model gets written. The following icon reveals the Component panel. Its three tabs give access to all kinds of characteristics of the selected component. Those tabs are Attribute, Style, and Behavior.
.gif "image001(3).gif")
Unlike the breadcrumb (located at the bottom of the page), which focuses on a selected component, the third panel, Structure, displays a tree structure of the current page’s components. The last panel of our no-code platform is a Toolbox. It offers a variety of visual and structural elements that can be used to build a page. The ones more commonly used are texts, buttons, icons and boxes.
NB: Any four panels mentioned above can be resized, closed, or opened individually.
.gif "image002(21).gif")
Let’s take a closer look at the Project Explorer and Component panels. As mentioned above, the application’s data modelling is built in the first one. It’s also where you can find any pages after they are created. Another interesting fact is that you can use this section to navigate to any of them (other than a detail page), even before it is part of the UI. To do so, open the Pages folder and double-click on the page. As for detail pages, if a list page of the same type exists, you can also easily navigate to it. Open the list page first and click on one of the list entries.
There are three icons in the top right corner of the Project Explorer panel. This one .png "image(42).png")
is significant as it allows you to modify the selected element's properties. The properties available through this button will change according to the type of element selected.
As for the Component panel, let’s describe its three tabs. The first one lists the attributes and properties of the selected component from the UI. The Style tab is subdivided into multiple sections with names such as text, background, Border, spacing, sizing, etc. From the last tab, Behavior, the component's data can be defined, a visibility condition can be set, an action can be applied after a click, and so much more.
.gif "image004(9).gif")
To learn more about the UI of the platform, click here.