---
title: "1. Creating Views and Adding Components"
---

# 1. Creating Views and Adding Components

> In Perspective, views are the primary unit of design and a container provides a way of organizing and laying out components within a view. There are a variety of container types that support different layout strategies.

To keep this example simple and get you started creating your first view, we used a Coordinate container type. This example requires that you are connected to the [Programmable Device Simulator](../../../ignition-modules/opc-ua/opc-ua-drivers/programmable-device-simulator/programmable-device-simulator.md) and set the program to Generic. 

1. With the Perspective Designer open, go to the **Project Browser** and expand **Perspective**.

    ![](https://www.docs.inductiveautomation.com/assets/images/2018-12-03_16-46-12-0a64e537db3863337a83d7e74b904b9c.png)

2. In the Project Browser, click on the **Views** folder and right click on **New View...**. 
    1. Select a **Root Container Type** from the dropdown. Select [**Coordinate**](../../../appendix/components/perspective-components/perspective-container-palette/perspective-coordinate-container/perspective-coordinate-container.md) container type.
    1. Check the **Page URL** checkbox if you want your view attached to the Page URL.
    1. Click **Create View**.

    :::caution Match the URL with the Folder Structure
    Perspective will match the **Page URL** with the View's folder structure upon creation. In the example below, the FirstView was created in the Test folder. Perspective knows to match the URL to the View.
    :::

    ![](https://www.docs.inductiveautomation.com/assets/images/2020-01-02_13-15-14-35d30f3868f37212967d462296721b9f.png)

    :::note
    If your View Name contains a space, such as "Station B", the Page URL will replace the space with a hyphen. The Page URL automatically gets filled in when the View Name is typed in.

    ![](https://www.docs.inductiveautomation.com/assets/images/2020-01-02_13-18-28-17dd2ff2109aca4ebbf2180868c62fb9.png)
    :::

3. The Designer will refresh and now you're ready to begin adding components into your view. On the right side of the Designer, click on the grayed out **Perspective Components** banner to open the **Components Palette**. Drag the [**Text Field**](../../../appendix/components/perspective-components/perspective-input-palette/perspective-text-field/perspective-text-field.md), [**Label**](../../../appendix/components/perspective-components/perspective-display-palette/perspective-label/perspective-label.md), and [**Cylindrical Tank**](../../../appendix/components/perspective-components/perspective-display-palette/perspective-cylindrical-tank/perspective-cylindrical-tank.md) components into the View. 

    ![](https://www.docs.inductiveautomation.com/assets/images/2020-11-25_11-49-40-0ef0e4c5134e23c7e49ffc6c90e624e7.png)

4. To add Tag values to each of the components, click on the component and enter the value in the **Perspective Property Editor**, or drag a Tag to the **value** property.
    1. **Cylindrical Tank**: Drag a Tag from your Tag Browser on to the **value** property. This example uses a **Ramp1** tag.

        ![](https://www.docs.inductiveautomation.com/assets/images/2020-11-25_12-04-24-d870f698ae77623e2600308db252e575.png)

    1. **Label**: Enter **Tank 100** next in the **Text** property field.
    1. **Text Field**: Enter **Hello World!** in the **Text** property field. While the component is selected, you can also click and drag the arrow handles to resize them and move them in the Designer workspace. 

         ![](https://www.docs.inductiveautomation.com/assets/images/2020-11-24_17-05-15-ecf3dbaf10fcd619be8f2729ab768675.png)

5. Another way and the simplest way to add a Tag to a component is to go into the **Tag Browser**, select the Tag (i.e., Sine0) you want and drag it into your view. A pop-up will appear giving you several selections for components to use. We selected an **LED Display** to show our tag value. 

    ![](https://www.docs.inductiveautomation.com/assets/images/2020-12-02_14-36-10-15dcbc14eac5e9efe0e27d687b5ad754.png)

6. Repeat that process to create two more LED Displays using Sine1 and Sine2.

    ![](https://www.docs.inductiveautomation.com/assets/images/2020-11-25_10-11-13A-2b3c3c15b9bcb0be2c1646afa2851980.png)

7. Save your project by selecting **File** > **Save**.

To learn more about bindings, go to the [Bindings in Perspective](../../../ignition-modules/perspective/working-with-perspective-components/bindings-in-perspective/bindings-in-perspective.md) page.