> For the complete documentation index, see [llms.txt](https://docs.adapptio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.adapptio.com/working-with-adapptio/tutorials/1.-hello-world.md).

# 1. Hello World

### The Goal

Prepare a basic responsive application, reflecting *Input Field* value into two *Text components*, where one should be a *String* and the second one a *Function*.

![The Hello World Application](/files/2bK0UFiG1Z9FVXVGTv7r)

### The Description

Any changes you will make to any existing *Components* are fully responsive. In our case, we are placing one *Text Input* and two *Text components* into the *Canvas work-field*. First, the *Text* output would be bound as a `constant Value`; the second one would be mapped `dynamically` by a *Function*.

### The Knowledge You Will Get

1. Responsive notion.
2. Working with *Components* and their properties.
3. Understand the difference between *Constant* and *Dynamic Values*.

### The Project Structure

{% tabs %}
{% tab title="View\[MainView]" %}
MainView

* [ ] Container\[cntHelloWorld]
  * [ ] Text Input\[fldInpName]
  * [ ] Text\[txtString]
  * [ ] Text\[txtFunction]
    {% endtab %}
    {% endtabs %}

### 1. Prepare your MainView Canvas

The `MainView` is an inseparable part of all applications and is superior to any other *Views*. You can put components directly to the `MainView` *Canvas* or start by creating a new one.

{% hint style="info" %}
Keep in mind that the application is always run from the `MainView`. Mean, if you use another one, you won't see any results after deployment till you will bind `MainView` with a *View component*.
{% endhint %}

Let's say that we will stay in `MainView` for this tutorial.

1. Find a **Container** and drag and drop it to your `MainView` *Canvas* from the *Component Panel*.
2. Rename its *ID* to `cntHelloWorld` at the *Inspector Panel*. You can also see the `name` change in the *Outline Panel* at that time*.*
   1. Set up *Common* -> *Flow* on `Under each other`, telling us sorting of child components.
   2. *Common* -> *Horizontal Alignment* -> `Center` and *Vertical Alignment* -> `Middle` ensuring position of all placed components right in the middle.
   3. *Style* -> *Spacing* -> `Medium` is set up distance between all child components.
   4. The last setting of the `cntHelloWorld` *Container* has to be *Layout* -> *Item Flex* -> `Stretch` filling full content *View*.

{% tabs %}
{% tab title="Canvas\[MainView]" %}
![](/files/4JlPvry9JLzBYEhz1oyj)
{% endtab %}

{% tab title="Outline\[MainView]" %}
![](/files/NvfcscepDLGRUfnmfoJi)
{% endtab %}

{% tab title="Inspector\[Common]" %}
![](/files/LhbRPpzEHgJhjzLLfkOH)
{% endtab %}

{% tab title="Inspector\[Style]" %}
![](/files/wxABRxORrq6EPB5FaBci)
{% endtab %}

{% tab title="Inspector\[Layout]" %}
![](/files/pEhYjqWjPpodaYdOrHSg)
{% endtab %}
{% endtabs %}

### 2. Placing Components into Container

Place three components into `cntHelloWorld` *Container* and set up their properties.

1. First, put into `cntHelloWorld` **Text Input** from *Component Panel* and set up its *ID* -> `fldInpName` following next properties:
   1. *Common* -> *Value* -> "`...`" showing content of `fldInpName` by a *Default*.
   2. *Common* -> *Placeholder* -> "`Input your name`" ensure hint of the *Text Input* unless its empty *Value*; for example, if you will delete "`...`" when the application will run.
   3. *Layout* -> *Width* -> `200px` forcing to keep the pixel width of the *Text Input*.
2. The Next component would be a **Text** that *ID* set up on `txtString`. Keep the *Value* empty for a moment and continue with other properties:
   1. *Common* -> *Text Style* -> `Bold` and *Font Size* -> `Large` defines graphical output style of `txtString`.
3. The Last component would be a Text also with *ID* -> `txtFunction`. Even here keep Value blanc and set up as follows:
   1. *Common* -> *Text Style* -> `Bold`; *Font Size* -> `Large`; *Foreground* -> `RED` what represents graphical output of `txtString`.

{% tabs %}
{% tab title="Canvas\[cntHelloWorld]" %}
![](/files/CVknyKzAVgAqTQXrHsay)
{% endtab %}

{% tab title="Outline\[MainView]" %}
![](/files/CvcewEl6uy3NMomsDsjB)
{% endtab %}
{% endtabs %}

### 3. Bind Components Together

Both *Text Components* have to assume the *Value* of the *Text Input*. We can make it in two ways; first, *Text Input* will stay as a *constant Value*; the second one will be switched to a *Function*.

{% hint style="info" %}
Any associable *Values* and callable *Functions* of the existing *Components* can be referenced by matching the structure in the *Data Explorer*.
{% endhint %}

1. Set up `txtString` *Common* -> *Value* -> `Hello, ${fldInpName.value}`
2. Switch on *Function* of `txtFunction` by clicking on *ƒx* icon on the right side of the *Value property*.
3. Set up `txtFunction` *Common* -> *Value* -> `"Hello, " + fldInpName.value` 

{% hint style="info" %}
You will see "Hello, ..." *Text output* at both *Text Components* if you did it right*.*
{% endhint %}

{% tabs %}
{% tab title="Canvas\[Main View]" %}
![](/files/EFPqqs0TWHB2eXgvCwiA)
{% endtab %}

{% tab title="Code Editor\[txtString Value]" %}
![](/files/HnQWKlXoQauLUdTtPCtN)
{% endtab %}

{% tab title="Code Editor\[txtFunction Value]" %}
![](/files/qJoSlDAZfB2rL3JjsFHb)
{% endtab %}
{% endtabs %}

### The Conclusion

The *constant Value* and *Dynamic Function* are interconnected, and both settings are valid. Referencing *Function* from *String* has to be annotated by `${function}`; meanwhile, referencing *String* from *Function* has `“string”` annotation.