# UI Builder

It serves as a centralized workspace where you compile various components, design and execute queries to facilitate interaction with data sources, and ultimately release your applications to users.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2F3Fo343TnwHl5RwTuhUs0%2Fimage.png?alt=media&#x26;token=844fd215-0f68-41ca-97bf-c1942098de1a" alt=""><figcaption><p>UI Builder</p></figcaption></figure>

***

The sections below explain the UI Builder in detail.

## Toolbar

The Toolbar consists of two main components: a top bar located at the top of the screen and a left sidebar that runs along the side of the interface.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FyIyF6lUkTPzDyovwuYGA%2Fimage.png?alt=media&#x26;token=08516fb6-45bb-4360-8e81-ccdb58398f66" alt=""><figcaption></figcaption></figure>

You can select the choice to display either the design <mark style="color:blue;">layout</mark> or the <mark style="color:blue;">logic</mark> section of the application. Alternatively, you can choose to display both options simultaneously.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FM44c8WNyk8KjlZULUD8S%2Fimage.png?alt=media&#x26;token=ffcdea98-2b02-420e-a69c-a231ec0072de" alt=""><figcaption><p>Choose view</p></figcaption></figure>

![](https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FIXvYIcMROc4WK3jKUCyO%2Fimage.png?alt=media\&token=aff640b4-1a17-4a55-968d-1ed2ad0bce50) Before finalizing the app, it is important to review the app which can be done using the 'Preview' mode and release it to the public using the 'Publish' feature. It is also beneficial to track and analyze the modifications made to the app over time that are accomplished using the 'History' tool.

{% hint style="info" %}
Refer the [Vesion Logs & Restore](https://docs.appizap.ae/build-apps/version-and-release-management) page for more details.
{% endhint %}

***

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2F6bLlLG3nsP3YPy98wJJm%2Fimage.png?alt=media&#x26;token=316f7262-1515-492d-84cb-d6e2c5744e0f" alt=""><figcaption></figcaption></figure>

![](https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fz1ObQgFYxnJwzeOddJ2d%2Fimage.png?alt=media\&token=29f5210d-a98f-4395-ace3-1b1878a668a7) Toggle the visibility of the data browser, allowing users to easily display or conceal the dataset for better organization and navigation.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FhuJyDi6hdcZ1hw1igyOM%2FToggleDatabrowser.gif?alt=media&#x26;token=18b9ede8-1cfa-4c11-bdf6-08c75cf26dee" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Refer to this page for more details on [Data Browser](https://docs.appizap.ae/appizap-studio/data-browser)
{% endhint %}

![](https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fxza6qfdkxTM94XybQeKJ%2Fimage.png?alt=media\&token=a5230782-8eeb-43e0-a78e-ef5adff0a5ec) You can choose to display or conceal the dynamic layers window, which allows users to easily access and review the basic properties and styles of widgets through a quick preview.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FM5hSK6Ky9uMf0EyYwylV%2FToggleLayers.gif?alt=media&#x26;token=df8cc825-659f-432f-97e2-d98ee8d20eeb" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Refer to this page for more details on [Layers](https://docs.appizap.ae/app-interface/layers)
{% endhint %}

![](https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fkn7Rczi9aeJhwNtigztp%2Fimage.png?alt=media\&token=103c48df-a752-45e8-a9a9-f27135fbe2c2) Display or conceal the overall screen configuration options. Customize the visibility of key settings within the screen for a personalized user experience.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FkUbcQSCSOCEtuvScU6Za%2FToggleSettings.gif?alt=media&#x26;token=08136d8b-379c-4d59-abe2-06e0e5c7ee83" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Refer to this page for more details on [Screen Settings](https://docs.appizap.ae/app-interface/general-app-settings)
{% endhint %}

![](https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FW4rqdrkBscBD0vdoQWbT%2Fimage.png?alt=media\&token=9144d1f0-1c56-4154-acbc-1a615304e779) Display or hide the "Errors and logs" section, that records issues or problems within the app. This process involves identifying, documenting, and tracking various types of errors that may occur during program development.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FCP90QuuTDBlIjqFtAlVq%2FToggleErrorsLogs.gif?alt=media&#x26;token=f364daea-3e3d-40b7-b370-d204783e2ed2" alt=""><figcaption></figcaption></figure>

## App Studio (Canvas)

The main focus of the editor is the canvas where you can visually design and preview the user interface of your app. By dragging and dropping various components onto the canvas, you can customize the layout and appearance of your app.&#x20;

Additionally, you can connect these components to data sources and event handlers to enhance the functionality of your app. This process allows you to create a visually appealing and robust application.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FzAIwcyAlKyKsLV4frI7h%2FAppStudio.gif?alt=media&#x26;token=00e7cd09-966c-43b0-88c5-61ac1b1ab225" alt=""><figcaption></figcaption></figure>

## Widget Library

The area where you can find the component and property pane is situated towards the right side of the window. To add components to your project, simply drag them from the Insert tab onto the canvas. You can then customize the properties of these components by accessing the Properties tab.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2F2aC5lpmTIjkghMSHySde%2Fimage.png?alt=media&#x26;token=36740145-1816-43b9-840f-2afb132933a0" alt=""><figcaption></figcaption></figure>

When the user clicks on a widget within the canvas, the Properties tab will immediately become active. This tab will then show all the relevant properties and styles associated with the selected component.

{% hint style="info" %}
Refer to this page for more details on [Widget Library](https://docs.appizap.ae/app-interface/widget-library)
{% endhint %}