---
title: "7. Add Components to a Window"
---

# 7. Add Components to a Window

> You can drag and drop components onto your project windows. Components can do everything from displaying text, to showing Tag values, to displaying reports and more. You can bind components to each other, to Tags, to values in the database, or any combination. Let's create a few components and show live values in the Client.

## Add Components to Your Project

1. From the Designer, go to the **Project Browser** and right-click to open the **Main Windows -> Overview** window.

    ![""](add-components-open-page.png)

2. You can see there are already components on the window, let's make a little space. Select the large text Label and right-click to delete it.

    ![" "](add-components-delete.png)

3. Now we have some space to work with. You can start by clicking and dragging components from the **Component Palette** on the right onto the window. Let's add a **Text Field** and a **Label** component. Users can type in the text field.

    ![" "](add-label-and-field.png)

4. Double-click on the **Label** component to type directly into it. I've renamed mine to say "Enter Text." You can also select a component and click-and-drag the arrow handles to resize them.

5.  Now let's add some Tag values to the window. The simplest way is to go into the **Tag Browser** and drill down to the Tag(s) you want and drag them onto the window. Select a few Tags and drag them into the window. You will see a popup asking you what type of components you want to use to show these Tag values. Select **LED Display**.

    ![" "](add-components-drag-tags.png)

6. Now you can see live values on your window! Don't forget to **save your project**.

You can Preview your project in the Designer by clicking the **Preview Mode** button. This allows you to interact with your windows as if you were using a Client. The Preview Mode button changes between a green triangle and a red square depending on which mode you are currently in. Look for the green triangle to go into preview mode.

![" "](add-components-preview.png)

Learn more about [Components](visualization-and-dashboards\understanding-components\understanding-components.md) and [Property Binding Types](visualization-and-dashboards\property-binding-types\property-binding-types.md)