# Introduction to Designing your app

Data powers your layouts in Stacker, allowing you to customize how information is displayed to your users. Tailoring these layouts enhances user experience and ensures that data is presented effectively.

Each type of layout shows your app in a different way and can be customized to meet your business needs. 

* Use a board layout to show a pipeline for your sales leads. 
* Show your CRM with large cover photos in the Card Layout. 
* Use the table layout to show your data in an organized list. 

{% embed url="<https://app.arcade.software/share/vH1KahkVIqJGwVR1vZDp>" %}

**Layout Customizations**

* Use a header with a large image or brand color
* Include a title of the page and a description to let your users know what they could find on the page

<figure><img src="https://3670244749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QaGf7ZvNU2Re8mlQTaJ%2Fuploads%2FzjpX9wQg9rhwGxUB4qsQ%2FCleanShot%202024-10-28%20at%2014.53.41%402x.png?alt=media&#x26;token=bf349d28-db7a-486a-8468-d781113da818" alt=""><figcaption></figcaption></figure>

* Decide what fields show in your cards title, eyebrow, or footers

<figure><img src="https://3670244749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QaGf7ZvNU2Re8mlQTaJ%2Fuploads%2FrwejU7zYoeuc8fM6CCtc%2FCleanShot%202024-10-28%20at%2014.51.08%402x.png?alt=media&#x26;token=bf61791a-8997-4d4b-b87a-f3ea58eee9d9" alt="" width="563"><figcaption></figcaption></figure>

* Place filters on your tables or allow your users to filter the data based on what they are looking for
* Decide what fields appear on your layouts

<figure><img src="https://3670244749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QaGf7ZvNU2Re8mlQTaJ%2Fuploads%2FKmwOK8fGTY9bDlEbHdFk%2FCleanShot%202024-10-28%20at%2014.55.01%402x.png?alt=media&#x26;token=a7af053f-c6ba-481f-a28e-22085c17c057" alt="" width="563"><figcaption></figcaption></figure>

By customizing your layouts, you can provide an intuitive and engaging experience for your users, ensuring that they can access and interact with your data effectively.

## **App customizations**

Choose the icon for your apps, set logos for your workspace and choose the brand color of your app.&#x20;

Customizations for the app are done under **App Settings > General > Appearance**. This is where you can change the color of the app or choose a new app icon.

**Change the name of the app**&#x20;

Change the name of your app under **General > Rename your app** and change the **URL** under **Change your URL.** This allows you to make your app your own.&#x20;

<figure><img src="https://3670244749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QaGf7ZvNU2Re8mlQTaJ%2Fuploads%2FwlNV9SB86RuacuJkvGFo%2FCleanShot%202024-10-28%20at%2015.02.24%402x.png?alt=media&#x26;token=9e8c528d-57e7-44f6-8b38-a569018fef13" alt="" width="563"><figcaption></figcaption></figure>

**Workspace customization**

Customize your workspace Logo, color and name under **Settings** on the workspace home page.

<figure><img src="https://3670244749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QaGf7ZvNU2Re8mlQTaJ%2Fuploads%2FQgQZUztj5oufdXAXsODI%2FCleanShot%202024-10-28%20at%2015.01.30%402x.png?alt=media&#x26;token=3b8dcb2b-25b1-40f9-ad97-0b315f378d58" alt="" width="563"><figcaption></figcaption></figure>

{% tabs %}
{% tab title="List Layout" %}
The List Layouts are powered by data you upload to your app.&#x20;

By default, the List layout will show all rows in your data table. In the case of our Sales app, the list view will show all meetings. &#x20;

<figure><img src="https://3670244749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QaGf7ZvNU2Re8mlQTaJ%2Fuploads%2FGvqXtftI4iz8MpVLs8Sc%2FCleanShot%202024-09-23%20at%2015.58.07%402x.png?alt=media&#x26;token=ce9780a0-b323-4b96-8ae4-01fbee1143a1" alt=""><figcaption></figcaption></figure>

### To edit a List layout:

1. Click the page you want to edit in the app menu
2. Click<img src="https://3670244749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QaGf7ZvNU2Re8mlQTaJ%2Fuploads%2FnwPUNjZ6bEwMwsAacHwR%2FCleanShot%202024-04-02%20at%2009.08.29%402x.png?alt=media&#x26;token=43a6b412-6838-4c61-9337-56245d54b81d" alt="" data-size="line">**Edit layout**

#### List layout customization options <a href="#list-layout-customization-options-0-1" id="list-layout-customization-options-0-1"></a>

When you edit a List layout, you will be able to:

* Filter records depending on a field value
* Sort your list
* Add a photo or colored header
* Set a cover image for each record
* Set the display type
* Enable inline filters
* Choose which fields will show
* Edit the field displays
* Add action buttons
* Edit the Quick Menu options

{% hint style="info" %}
**Tip:** You can have multiple List layouts for the same table by [duplicating](https://docs.stackerhq.com/stacker-astra/getting-started/broken-reference) your list layout.&#x20;
{% endhint %}
{% endtab %}

{% tab title="Detail Layout" %}
You will see the Detail layout when you click a record in the List layout. In the List Layout example, the Detail layout shows one table row at a time. In our HR app, you would see all details of an open position in the Detail layout. The Detail layout will be identical for all records within the table.

#### Detail layout customization options <a href="#detail-layout-customization-options-0-3" id="detail-layout-customization-options-0-3"></a>

When you edit a Detail layout, you will be able to:

* Set a Record header
* Add Action buttons
* Add Tabs
* Choose when to show fields using conditional visibility
* Choose which fields will show and what they will look like
* Add Highlighted fields for extra emphasis
* Display a pipeline with stages
* Show related records
* Add Embeds
  {% endtab %}

{% tab title="Create Layout (Forms)" %}
Create layout lets you control what your app users will see when they create a new record. In our HR app, we see the Create layout when we click the **Add new** button to add a new position.&#x20;

### To edit the Create layout:

1. Click the page you want to edit in the app menu&#x20;
2. Click **Add new**.
3. Click<img src="https://3670244749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QaGf7ZvNU2Re8mlQTaJ%2Fuploads%2FnwPUNjZ6bEwMwsAacHwR%2FCleanShot%202024-04-02%20at%2009.08.29%402x.png?alt=media&#x26;token=43a6b412-6838-4c61-9337-56245d54b81d" alt="" data-size="line">**Edit layout**&#x20;

#### Create layout customization options <a href="#create-layout-customization-options-0-5" id="create-layout-customization-options-0-5"></a>

You can have only one Create layout per table. By default, you will only see fields that are visible in the Detail layout. If you want to change that, check the **Customize your create layout** in the Edit layout screen. You will then be able to:

* Choose which fields will show and what they will look like
* Choose when to show fields using conditional visibility

Check out a full list of Create Layout Customizations here.

{% hint style="info" %}
**Tip:** If you would like to prevent your users from adding new records, you can remove the add new button with permissions. Learn how here.&#x20;
{% endhint %}
{% endtab %}

{% tab title="Custom Pages" %}

<figure><img src="https://3670244749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QaGf7ZvNU2Re8mlQTaJ%2Fuploads%2FQQvirZzaAfU7DJTfcQO0%2FCleanShot%202024-09-23%20at%2016.10.50%402x.png?alt=media&#x26;token=3c92a8a0-3b03-4985-9285-aa887607bf03" alt=""><figcaption></figcaption></figure>

### Custom Pages

Custom pages are created without needing a datasource. You can include data widgets along with static widgets, but data isn’t central to creating the layout in your Stacker app.

### To add a Custom Page:

1. Click the **Add new** button on the bottom left
2. Choose **Custom page**
   {% endtab %}
   {% endtabs %}