# Settings Panel

Manage and customize all aspects of selected widgets or components from a centralized location. Adjust parameters such as layout, styling, interactions, and more to achieve your desired app aesthetics and functionality effortlessly.&#x20;

<figure><img src="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FYWVbokJ0lV0Pfiey181M%2FCleanShot%202023-05-26%20at%2011.53.37%402x.png?alt=media&#x26;token=91a3d0c3-f8e6-4614-bd80-85a1e8b7819c" alt="" width="375"><figcaption><p>Settings Panel</p></figcaption></figure>

The Settings Panel put to your disposal four key tools :&#x20;

* Basic parameters
* Generate children from variable
* Add Action
* Add Animation

## Basic Parameters

<figure><img src="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FzS3PFbn1Pn7HduRbkwVQ%2FCleanShot%202023-05-26%20at%2014.13.24%402x.png?alt=media&#x26;token=4a11a53e-983c-475a-8038-5264e440588c" alt="" width="375"><figcaption><p>Basic Parameters</p></figcaption></figure>

It allows you to modify the parameters of you page or widget and see the result directly on the Application Preview.

## Generate Children From Variable

<figure><img src="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FxYWzAiqUNuScANbywhX5%2FCleanShot%202023-05-26%20at%2014.14.04%402x.png?alt=media&#x26;token=1f70901a-f260-448e-aaa7-7af80e749559" alt="" width="375"><figcaption><p>Generate Children From Variable</p></figcaption></figure>

It allows you to generate children of a widget by taking in parameter a data source.

This data source can be anything such a a List of String, an observable ..

### ✨ Tips

There is two checkbox **List** and **Nullable** to fully customize the data source you want to use !

## Add Action

<figure><img src="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FsXpST554hyqcqCcg8jQc%2FCleanShot%202023-05-26%20at%2014.14.52%402x.png?alt=media&#x26;token=4f26527c-a2aa-4e66-94cc-0c283452d139" alt="" width="375"><figcaption><p>Add Action</p></figcaption></figure>

It allows you to add action to the concerned widget.

To fully understand the Action Flow Editor see [action-flow-editor](https://docs.goril.app/main-pages/action-flow-editor "mention") page.

## Add Animation

<figure><img src="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2F5eZW6fWXQgvYCrMYKh04%2FCleanShot%202023-05-26%20at%2014.14.26%402x.png?alt=media&#x26;token=181079c0-a434-477c-9c95-986ec1834064" alt="" width="375"><figcaption><p>Add Animation</p></figcaption></figure>

It allows you to add animation to the concerned widget.

There is a large choice of animation you can choose when clicking on **Add Animation**.

<figure><img src="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FHYwD5QcDq1km2AxN0x6i%2FCleanShot%202023-05-26%20at%2014.26.25%402x.png?alt=media&#x26;token=6abbd77d-0861-477e-8b11-d84f1b5a2c9c" alt="" width="375"><figcaption><p>Animation choices</p></figcaption></figure>

<figure><img src="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2Fi63AbZulX5Nuh12MBLwf%2FCleanShot%202023-05-26%20at%2014.30.15%402x.png?alt=media&#x26;token=d9567fcb-d30a-4159-b623-37b7f60d834b" alt="" width="375"><figcaption><p>Added Animation</p></figcaption></figure>

You can now click on the animation to deploy an inside settings panel to customize it.

<figure><img src="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FdN4NVa6m9ZzH86jNxXP7%2FCleanShot%202023-05-26%20at%2014.30.30%402x.png?alt=media&#x26;token=46e0c071-9de7-46d2-a7a9-fa4875ef233a" alt="" width="375"><figcaption><p>Animation Settings</p></figcaption></figure>
