---
title: "Contents Tab | ThreatConnect"
slug: "contents-tab"
description: "This article describes the Contents tab of the App Builder screen, including how to create and manage files and directories in an App project."
tags: ["Orchestration and Automation", "Developer Tools", "Markdown"]
updated: 2023-07-26T13:29:11Z
published: 2023-07-26T13:29:11Z
canonical: "knowledge.threatconnect.com/contents-tab"
---

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

# Contents Tab

The **Contents**tab is a clickable table of contents for the files that compose the App (Figure 1).

![Graphical user interface, text, application, chat or text message Description automatically generated](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Figure%201_Contents%20Tab_7.2.0.png)

NoteYou can drag and drop this tab into a different area of the [**App Builder** screen](/v1/docs/the-app-builder-screen), if desired.

The selected file, indicated by gray shading (e.g., **app.py** in Figure 1), is the file that shows in the [**Code Editor**](/v1/docs/code-editor) displayed in the center of the [**App Builder**screen](/v1/docs/the-app-builder-screen).

You can add a file to the project by dragging and dropping it into the **Drop a file, or browse to upload.** square or by clicking on this square to locate and select a file on your computer to upload.

NoteThe code generated in the **app.py** file is determined by the type of App selected in the [**Create App** window](/v1/docs/administrative-functions-for-projects-and-apps).

Select the **Show non-editable files**checkbox to view the files associated with the App that may not be edited (Figure 2). You can view these files in read-only form in the **Code Editor**, as indicated by the **lock**![](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Lock%20File%20icon_App%20Builder.png)icon displayed to the right of the file name.

![Graphical user interface Description automatically generated with medium confidence](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Figure%202_Contents%20Tab_7.2.0.png)

Although these files cannot be edited, their contents are automatically customized as you enter information into the App Builder. For example, Figure 3 shows the contents of the **install.json**file for the project. The name of the App is on line 3, and an [App note](/v1/docs/metadata-tab#creating-an-app-note), as entered in Markdown, is on line 13.

![Graphical user interface, text, application, email Description automatically generated](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Figure%203_Contents%20Tab_7.2.0.png)

## Files

### Creating a New File

To create a new file, click **Create File**![Icon Description automatically generated](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Create%20File%20icon_App%20Builder.png). The **Create File**window will open (Figure 4).

![Graphical user interface, application Description automatically generated](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Figure%204_Contents%20Tab_7.2.0.png)

- **Path**: The file’s path cannot be edited.
- **Name**: Enter a name for the file.
- Click the **CREATE** button. The new file will open in the Code Editor.

You can also create files in directories in the project contents. See the [“Directory Administration”](/docs/contents-tab#directory-administration) section for more information.

### File Administration

You can rename or delete files that you uploaded or created. To access these administrative functions, hover the cursor over the name of the file in the **Contents**tab to display a horizontal ellipsis to the right of the file name (Figure 5).

![Graphical user interface, text Description automatically generated](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Figure%205_Contents%20Tab_7.2.0.png)

Hover the cursor over the ellipsis to display two icons (Figure 6).

![A picture containing graphical user interface Description automatically generated](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Figure%206_Contents%20Tab_7.2.0.png)

- **Delete**![](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Delete%20File%20icon_App%20Builder.png): Click this icon to delete the file. The **Confirm** window will be displayed. Click the **REMOVE** button to delete the file.
- **Edit**![Icon  Description automatically generated](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Edit%20File%20icon_App%20Builder.png): Click this icon to rename the file. The **Rename File**window will be displayed. Enter a new name for the file, and then click the **CREATE**button.

ImportantFiles that are required by the platform installer cannot be renamed or deleted.

## Directories

### Creating a New Directory

To create a new directory, click **Create Directory**![A picture containing text, first-aid kit Description automatically generated](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Create%20Directory%20icon_App%20Builder.png). The **Create Directory**window will be displayed (Figure 7).

![Graphical user interface, application Description automatically generated](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Figure%207_Contents%20Tab_7.2.0.png)

- **Path**: The directory’s path cannot be edited.
- **Name**: Enter a name****for the directory.
- Click the **CREATE**button. The new directory will be displayed in the **Contents**tab.

ImportantYou may not select directories for viewing in the **Code Editor** because they are not files.

### Directory Administration

To access the administrative functions that may be performed on directories, hover the cursor over the name of the directory in the **Contents**tab to display a horizontal ellipsis to the right of the directory name (Figure 8).

![Graphical user interface, application, chat or text message Description automatically generated](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Figure%208_Contents%20Tab_7.2.0.png)

Hover the cursor over the ellipsis to display five icons (Figure 9).

![A picture containing text, first-aid kit Description automatically generated](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Figure%209_Contents%20Tab_7.2.0.png)

To upload a file to the directory, click **Upload File**![](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Upload%20File%20icon_App%20Builder.png). Select a file for upload from the file manager window that is displayed.

To create a new directory in the directory (i.e., a sub-directory), click **Create Directory**![A picture containing text, first-aid kit Description automatically generated](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Create%20Directory%20icon_App%20Builder.png). The **Create Directory**window will be displayed (Figure 10).

![Graphical user interface, application Description automatically generated](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Figure%2010_Contents%20Tab_7.2.0.png)

- **Path**: The directory’s path. In this example, the path indicates that the new directory will be in the existing directory (**New Directory**). The **Path**field cannot be edited.
- **Name**: Enter a **Name**for the directory.
- Click the **CREATE**button. The new directory will be displayed in the **Contents**tab within the original directory.

To create a file in the directory, click **Create File**![Icon Description automatically generated](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Create%20File%20icon_App%20Builder.png). The **Create File**window will be displayed (Figure 11).

![Graphical user interface, application Description automatically generated](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Figure%2011_Contents%20Tab_7.2.0.png)

- **Path**: The file’s path. In this example, the path indicates that the new file will be in the directory. The **Path**field cannot be edited.
- **Name**: Enter a name****for the file.
- Click the **CREATE**button. The new file will open in the **Code Editor**.

NoteOnce a directory contains at least one file, its contents can be collapsed and expanded by clicking on the arrow to its left.

To delete the directory, click **Delete**![](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Delete%20File%20icon_App%20Builder.png). The **Confirm**window will be displayed. Click the **REMOVE**button to delete the directory.

To rename the directory, click **Edit**![Icon Description automatically generated](https://cdn.document360.io/dfc206c8-1c9f-4725-b74d-a66f83432320/Images/Documentation/Edit%20File%20icon_App%20Builder.png). The **Rename Directory**window will be displayed. Enter a new name for the directory, and then click the **CREATE**button.

---

*ThreatConnect® is a registered trademark of ThreatConnect, Inc.*

20084-07 v.07.B