# GUI, Themes & Styles

A well-designed user interface plays a crucial role in enhancing the overall user experience and boosting user engagement. Within Appizap, users have the flexibility to personalize the appearance of each element and utilize the theme functionality to create unique interfaces tailored to specific applications or workspaces. 

Additionally, the inclusion of customizable icons and informative hint messages within the app further contributes to creating a more intuitive and user-centric interaction experience.

## Widget Styles

In the Properties tab, there is an option to customize the appearance of all widgets according to your preferences. This feature allows you to easily adjust the style of each widget individually. You have the ability to choose from a variety of colors using the color pickers, or you can input a specific CSS color code in the style section for a more customized look. 

In addition, there is the option to incorporate JavaScript coding to dynamically control the styling of the components based on certain conditions.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2F6vBs7hmpARMyitDtlFjS%2Fimage.png?alt=media&#x26;token=9c69b97d-0ff6-4a63-aeb2-4c732ee3fb46" alt="" width="245"><figcaption></figcaption></figure>

## Themes

The theme feature simplifies the process of customizing the appearance of all your applications in a workspace. This includes adjusting the primary color scheme used across all apps and selecting the default background color for different containers. With this feature, you can easily create a cohesive and visually appealing design for your entire workspace.

{% hint style="info" %}
A quick tour on [Themes interface](https://docs.appizap.ae/appizap-dashboard/settings/settings-3) is provided here
{% endhint %}

### Create a theme

Workspace admins have access to theme settings.&#x20;

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2F0fQusfX1iwUNqGSd3Gwp%2FGoToTheme.gif?alt=media&#x26;token=04c859af-434a-432a-9f27-7f26b129aa61" alt=""><figcaption></figcaption></figure>

Take a look at the live preview of the theme's effects. This will allow you to see how the theme will look in real-time before making any final decisions. This feature provides a more interactive and dynamic experience for users who want to visualize how the theme will appear on their website. By previewing the real-time theme effect, you can make adjustments or customizations to better suit your needs and preferences.&#x20;

This hands-on approach allows you to experiment with different options and settings to see what works best for your website.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FcvMXR30VjDXU80bN5eXB%2Fimage.png?alt=media&#x26;token=71b84a70-9f7b-4160-819c-cdc7b5fda4d1" alt=""><figcaption></figcaption></figure>

### Apply a theme

Navigate to the app editor and locate the "General App Settings" section to easily change the theme of your application.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FW10bYklukJ1CBBpY6kX5%2FApplyTheme.gif?alt=media&#x26;token=0061f2da-d990-4611-a842-9f00ab9b4c9b" alt=""><figcaption></figcaption></figure>

You can also set the default theme for all your apps within a workspace in **Settings** > **Themes** on Appizap homepage.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FG5G17dnXgfgvs4MpH97E%2FSetDefltTheme.gif?alt=media&#x26;token=2c0572d9-f790-4206-bd67-448e7c04bc3f" alt=""><figcaption></figcaption></figure>

### Switching themes dynamically

You can access the global variable `theme` and call the method `theme.switchTo()` to allow the end users to switch the theme of the apps on their side using JavaScript. The global variable `theme` has three fields. You can view them in the data browser.

* `id` and `name` are strings, indicating the ID and name of the current theme. When their values are empty, then the default theme is applied.
* `allThemes` is an array, including all information of available themes in the current workspace.

`theme.switchTo()` method switches the theme at the end user's side, and requires only a theme ID. When the passed value is an empty string `""`, then the default theme is applied. Once the end user switches the theme, it will be saved to the user browser's local storage. And this theme will override the default theme and apply to all apps that are used in the same browser.

#### Demo

Combining Option lists and Events, end users can switch the theme within the app.

Follow the steps below to include this function in your app.

1. Drag and drop a **Select** component onto your canvas. Set the data value as follows.

<pre class="language-Plain"><code class="lang-Plain"><strong>{{[{ id: "", name: "Default" }, ...theme.allThemes]}}
</strong></code></pre>

2. Set the labels and values as `{{item.name}}` and `{{item.id}}` respectively. Then, you can view the default theme and all other available themes in the current workspace.
3. Insert a **Button** component onto your canvas to switch theme. Add an event to the button, select "Run JavaScript" as the action, and run `theme.switchTo()` method which takes the value of the **Select** component.

## Custom CSS

Appizap provides a custom CSS feature for more flexible and customized UI styling. By incorporating this into the design process, users can achieve a high level of precision and detail in customizing the appearance of the UI.

### Screen-level CSS

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FFxXBDPUBbPC8t2qjOC1N%2FScreenLevelCSS.gif?alt=media&#x26;token=4af6cdd7-c3ee-4012-9353-0ce6c8935acf" alt=""><figcaption></figcaption></figure>

For example, insert text component `text1`. Then use `.text1` as the element name and modify its CSS style.

{% hint style="warning" %}
It is recommended to modify the component styles in **Properties** > **Style** because the DOM of an adjusted CSS style may change as the system iterates.
{% endhint %}

### Preload CSS

In Appizap, workspace admins can also set pre-loaded CSS styles for all apps within the workspace.&#x20;

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FZrfYLa6u4zQYsnf86oLi%2FPreloadCSS.gif?alt=media&#x26;token=97cc4410-5aa7-4f6b-85d3-cb4ad174d11c" alt=""><figcaption></figcaption></figure>

It is highly recommended to use CSS selectors as follows:

| Class name     | Description               |
| -------------- | ------------------------- |
| top-header     | Top navigation bar        |
| root-container | Root container of the app |

The name of each component functions as the class name. For example, for the `text1` component, you can use `.text1` as its class name and write CSS code for it. And the class names share the same form: `ui-comp-{COMP_TYPE}`—for example, you can use `.ui-comp-select` to define CSS style of all select components. All the components' class names are listed as follows.

```Plain
input
textArea
password
richTextEditor
numberInput
slider
rangeSlider
rating
switch
select
multiSelect
cascader
checkbox
radio
segmentedControl
file
date
dateRange
time
timeRange
button
link
dropdown
toggleButton
text
table
image
progress
progressCircle
fileViewer
divider
qrCode
form
jsonSchemaForm
container
tabbedContainer
modal
listView
navigation
iframe
custom
module
jsonExplorer
jsonEditor
tree
treeSelect
audio
video
drawer
carousel
collapsibleContainer
chart
imageEditor
scanner
```

Avoid using class names that may change with iterations, such as `sc-dkiQaF bfTYCO`.Appizap supports [CSS pre-processor](https://stylis.js.org/), you can use CSS nesting to improve efficiency, for example:

```css
.text1 {
    span {
        color: red;
        font-weight: bold;
    }
}
```

All the custom CSS for apps is saved into the space named `#app-{APP_ID}`, and the CSS for modules is saved into the space named `#module-{MODULE_ID}`.If your preload CSS does not work properly, it might be overridden by the theme or component styles with higher priority. Open the browser **Inspect** to check.

### Demo 1: Line break in table header

To allow line break in table header, insert the following code in **Script and style** > **CSS**.

```css
.table1 {
  th div {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: unset;
  } 
}
```

### Demo 2: Custom font family

To use custom font family, you need to define it first and then apply it. Insert the following code in **Script and style** > **CSS** to apply the font "Fredoka One" to all text components using Markdown mode within the app.

```css
@font-face {
  font-family: 'Fredoka One';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/fredokaone/v13/k3kUo8kEI-tA1RRcTZGmTlHGCaen8wf-.woff2) format('woff2');
}

.ui-comp-text .markdown-body {
  font-family: 'Fredoka One';
  font-size: 30px;
}
```

## User-friendly interaction

Appizap consistently performs at a high level when it comes to efficiency, ensuring that tasks are completed quickly and accurately. Additionally, the platform prioritizes security measures to protect user data and maintain privacy. The easy-to-use design of Appizap makes it accessible and user-friendly for individuals of all technical skill levels.&#x20;

Overall, Appizap excels in providing a seamless experience that combines efficiency, security, and user-friendly design.

### Hide UI components

Set the hidden properties of components when necessary to avoid information overload. For example, when creating a suggestion collection form, you can set the input box as visible or hidden depending on the user's selection. <img src="https://github.com/nighthack/Appizap-Docs/blob/main/.gitbook/assets/form-design-18.gif" alt="" data-size="original">

To achieve this effect, set the hidden property of the component `textArea1` with the code:

```JavaScript
{{Number(radio1.value) === 1 ? 'false' : 'true'}} 
```

When the value of the component `radio1` is "1", the value of the hidden property is "false"; otherwise, the value is "true". The component layout is automatically adjusted.

### Icon configuration

Icons are intuitive and can serve as alternatives to text in some cases. The proper use of icons gives users a better visual experience and helps them use the app more easily.

Prefix and suffix icons are available for some components, such as **Button**. Add icons in **Properties** > **Layout**.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2F6c2gd1DO1d3lUIW1h7ww%2Fimage.png?alt=media&#x26;token=8ddb7581-0abd-4ff4-91d3-e1531b5a2006" alt=""><figcaption></figcaption></figure>

You can select from preset icons or write JS code to insert icons, for example, `{{ "/icon:solid/Users" }}`.

### Placeholder & Tooltip

Tips improve app usability–for example, showing the tips for the input helps users better interact with the app.

<mark style="color:blue;">Placeholder</mark>: It displays in the empty input field to prompt the user what to type.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FgUYrv2q2uWrg1lHqYWzc%2Fimage.png?alt=media&#x26;token=ba3d5a75-fafb-4330-b6e1-4f0e6aed1f13" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">Tooltip</mark>: It adds an underline to the label. Users can see the tooltip via a mouse hover.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FHFGhzrBXOqC2jHz1Lm5P%2Fimage.png?alt=media&#x26;token=06acdd68-fd30-456f-b52c-236cbf864926" alt=""><figcaption></figcaption></figure>

### Notifications

Notifications are messages directly sent to your users to remind them of the status of their operations, confirm their success, or help them to proceed.

#### Global notifications

Global notifications for certain user interactions give users timely feedback. Appizap offers four types of global notifications: **Information**, **Success**, **Warning** and **Error**.

You can set global notifications in three ways:

1. Set in **Event handlers** > **Action** > **Show notification**. See [Show notification](https://docs.appizap.ae/event-handlers#show-notification) (Event handlers).
2. Set in **JavaScript queries** with [built-in functions](https://docs.appizap.ae/build-apps/write-javascript/built-in-javascript-functions).
3. Set in **Notification** tab in query settings. See [Notification tab](https://docs.appizap.ae/appizap-studio/query-basics#notification-tab-and-advanced-tab).

### Loading effect

When a query takes time to run, you can set the loading effect to inform your users that the query is running and avoid them from performing frequent operations.

For example, the loading effect of the Submit button is `{{form1SubmitToHrmsEn1.isFetching}}`. Clicking the button triggers query `form1SubmitToHrmsEn1` to run, and during this process, the button is displayed with the loading effect.

#### Confirmation modal

You can set a confirmation modal for a double check for your users when they perform operations such as adding, modifying or deleting data. In the **Advanced** tab of the query, toggle **Show a confirmation modal before running**, and enter a confirmation message.

#### Form design

Forms are frequently used to collect information. For more details on building easy-to-follow and productive forms, see [Design an efficient and user-friendly form](https://docs.appizap.ae/build-apps/broken-reference).