# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.adapptio.com/working-with-adapptio/tutorials/1.-hello-world.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.