> ## Documentation Index
> Fetch the complete documentation index at: https://docs.box.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Creating an App

export const InlineImage = ({src, alt = "", height = "1em"}) => {
  return <img noZoom src={src} alt={alt} style={{
    display: "inline-block",
    verticalAlign: "middle",
    height: height,
    width: "auto",
    margin: "0"
  }} />;
};

<div className="article_labels_list" style={{display: 'none'}} dangerouslySetInnerHTML={{__html: "End User , Established , Instruction , P1 , Box Apps"}} />

To create an app:

1. Go to **Box Apps**.
2. Click **New**.
3. Name your app.\
   You land on a page with an empty section.
4. Name the first section.
5. Configure the app by adding blocks to your first section and/or adding more sections.
6. When you finish adding sections and blocks, click **Done** to save your app.

<Note>
  **Note**\
  The **Done** button is inactive if you forgot to add parameters to any of the sections or blocks.
</Note>

<h2 id="configuring-a-section">
  Configuring a section
</h2>

1. Choose how you want to display the blocks in your section: by
   * In the **Section** area under **Configure App**, select **Grid** or **List**.

     <Frame>
       <img src="https://mintcdn.com/product-docs/quL11Ep44u3MfdfX/images/box-apps/37778999310355.png?fit=max&auto=format&n=quL11Ep44u3MfdfX&q=85&s=ae74076753936a036074529d86605162" alt="" width="544" height="394" data-path="images/box-apps/37778999310355.png" />
     </Frame>

   * Select a section, click the **List Layout**

     <Frame>
       <img src="https://mintcdn.com/product-docs/quL11Ep44u3MfdfX/images/box-apps/37778983731091.png?fit=max&auto=format&n=quL11Ep44u3MfdfX&q=85&s=202e66cfbc20005ac7f1fa4458978b66" alt="" width="394" height="338" data-path="images/box-apps/37778983731091.png" />
     </Frame>

     The grid view displays blocks in your section next to each other. The list view displays blocks in your section under each other.
2. In the **Add a description** area, enter any text that you want to display, and then format the description by double-clicking the content and choosing from the available options in the contextual menu.

   <Frame>
     <img src="https://mintcdn.com/product-docs/LzO2CV4GEJIZIaNP/images/box-apps/apps-section-description.png?fit=max&auto=format&n=LzO2CV4GEJIZIaNP&q=85&s=8cd050bb6a6229293b22128e6164bbfc" alt="apps-section-description.png" width="364" height="114" data-path="images/box-apps/apps-section-description.png" />
   </Frame>

To delete a section, select it and click the trash icon from the context menu.

<h2 id="adding-deleting-and-configuring-blocks">
  Adding, deleting, and configuring blocks
</h2>

To add a block, drag and drop it to your section from the Blocks area under **Configure App**, or choose the **+ Add Blocks** drop-down list in a section to add a new block to your app.

<Note>
  **Note**\
  To delete a block, select it and click the trash icon from the context menu.
</Note>

<Frame>
  <img src="https://mintcdn.com/product-docs/quL11Ep44u3MfdfX/images/box-apps/37778983742611.png?fit=max&auto=format&n=quL11Ep44u3MfdfX&q=85&s=afbba64bf8122c955594b415dadc9e22" alt="" width="210" height="124" data-path="images/box-apps/37778983742611.png" />
</Frame>

You can add the following blocks:

* View
* Chart
* File or Folder
* Form
* App
* Shortcut
* Auto Filer

<Columns cols={2}>
  <Frame>
    <img src="https://mintcdn.com/product-docs/quL11Ep44u3MfdfX/images/box-apps/37778999347987.png?fit=max&auto=format&n=quL11Ep44u3MfdfX&q=85&s=8d60a9b2a6dc1153647745152cdee558" alt="" width="289" height="256" data-path="images/box-apps/37778999347987.png" />
  </Frame>

  <Frame>
    <img src="https://mintcdn.com/product-docs/quL11Ep44u3MfdfX/images/box-apps/37778983751571.png?fit=max&auto=format&n=quL11Ep44u3MfdfX&q=85&s=c21a7723ba1e6c4d72d68eb966d245d2" alt="" width="177" height="342" data-path="images/box-apps/37778983751571.png" />
  </Frame>
</Columns>

<h3 id="required-and-optional-block-parameters">
  Required and optional block parameters
</h3>

There is one required parameter for all blocks: **Title/Tile Name**. You need to add it to every tile to save your app. Other required parameters differ depending on the block type.

Optional parameters are the same for every block type:

* **Description** – click **Add Optional Description** to display the **Description** field.

To add more lines to the field, press enter. Click **Hide Description** or delete the contents of this field if you want to remove it.

* **Theme** – choose a color theme. Select **Light** to choose a color for the block icon. Select **Dark** to choose a color for the whole block.

The default values for block names are:

* View: **Create a View**
* Chart: **Chart Title**
* File or folder: **Create a file or folder**
* Form: **Create a form**
* App: **Link to an App**
* Shortcut: **Create a shortcut**
* Auto Filer: **Create an AutoFiler**

<h2 id="block-types">
  Block types
</h2>

Choose the block types you want to have on your app.

<h3 id="view">
  View
</h3>

Select the **Create** tab in **Create a new View** to configure the View block. Add the following parameters:

* **View Name –** name your View
* **Metadata Template** – choose one of the available templates from the dropdown list

Click **Create** to finish adding a new view block. Click the **Hide Item Count** toggle if you don’t want to show the exact number of view results.

**Important:**

Once you set the View name and choose the metadata template, these options can’t be changed.

See [Configuring view](/en/box-apps/using-box-apps/configuring-view-in-box-apps) for more information about **View** blocks.

You can also duplicate a view block. To do so:

1. Select the **Duplicate** tab in **Save Views & Parameters**.
2. Add a name to your View.
3. Select a recent View from the **Duplicate settings from** drop-down list.
4. Click **Duplicate** to save your View.\
   You can also add the optional description and a theme to the duplicated view block.

<h3 id="chart">
  Chart
</h3>

With the Chart block, you can create a bar or donut chart based on the configuration details that you provide. For more information, see [Using Charts in Box Apps](/en/box-apps/using-box-apps/using-charts-in-box-apps).

<h3 id="file-or-folder">
  File or folder
</h3>

When you add a file or folder block, you need to specify a root folder where the app users will add new content. Click the **Select Content** button under **Choose from Box**. In the next window, you can see a standard search field and your **Files** view. Select a folder and click **Choose** to go back to block configuration.

<Note>
  **Note**\
  When you add a name, it changes the folder name in the block. The original folder name in your **Files** is not changed.
</Note>

<h3 id="form">
  Form
</h3>

In a form block, you need to provide a Box Form to use and decide how you want to present it.

Select the specific form under **Choose a Box Form** by clicking the search field or start typing in the name of the Form to get a suggestion.

There are two options of the **Presentation** parameter: **Overlay / Pop-Up** and **Open in New Tab**.

<h3 id="app">
  App
</h3>

The app tile links to another app you or another Box Apps Admin created. Click the **Select an App** field under **Choose from Box** to display the available apps.

<h3 id="shortcut">
  Shortcut
</h3>

Add a link in the **Enter a URL** field.

<h3 id="auto-filer">
  Auto Filer
</h3>

Add Metadata to files or folders while they are uploading. You can add Metadata in the **Current File** tab. Select the desired **Metadata Template** from the drop-down list.

<h3 id="list">
  List
</h3>

Lists are customizable saved searches based on metadata. Name your list and select the metadata template you want to use. After creating a list block you can add filters to it. The filters depend on the metadata template you use.  Click the cogwheel icon in the **Customize** section to set up filters, select columns you want to see in your list view, and display settings. Toggle on or off the options in the **Presentation** section: **Show Item Count** and/or **Show Borders**.

A list block is designed to have feature parity with the View block tooling, but some functionalities are still in development. If you can't find an option in the List block, click the icon in the top-right corner to open the corresponding View.

<h2 id="adding-pages">
  Adding pages
</h2>

You can add multiple pages when you’re creating or editing your apps.

To add more pages:

1. Click **New App** or navigate to an existing app and click **Edit**.
2. Click the **Add Page** button under the app name.
3. Name your new page. The name has to be unique and no more than 50 characters long.

Once the new page is created, you can populate it with blocks.

Any new pages you create are added to the right.

Click the **More Options** (ellipsis) menu to display the page actions:

* **Duplicate** — duplicate page name is *original page name(1)*
* **Rename**
* **Move Left**
* **Move Right**
* **Delete**

<Note>
  **Note**\
  By default, your app has one page and only the first two options from the **More Options menu** are available.
</Note>

When your app has multiple pages and they no longer fit in the visible navigation bar, a **More** dropdown appears. Click on it to access the rest of your pages. When you reach the 15 page limit, the **Add Page** button greys out.

Long page names are displayed when you hover on the name.

### Sharing a page

You can share only a specific page(s) from your app. To do so:

1. Share your app like any other Box product.
2. After you [invite a collaborator](/en/box-fundamentals/for-users/collaborating/collaborating-by-inviting-others/inviting-collaborators), open the **More Options** menu in your app.
3. Choose the **Manage Collaborators** option.
4. Select the correct [access level](/en/box-apps/box-apps-for-box-admins/box-apps-permissions) in the **Permission** column.
5. Select the pages you want to share with the collaborator in the **Added To** column — only available for the Viewer role.

By default, every new collaborator has access to the whole app (**All current and future pages**). If you want to restrict the collaborator’s access, select the Viewer access level for them and follow the instructions above.

<Note>
  **Note**\
  If a collaborator with the Viewer access removes themself from a page, they lose access to the whole app.
</Note>
