# Dinamically add TextInput

**URL:** <https://forums.fusetools.com/t/dinamically-add-textinput/7579>\
**Category:** How-to Discussions\
**Created:** [December 27, 2018, 1:46pm UTC](https://forums.fusetools.com/t/dinamically-add-textinput/7579 "2018-12-27T13:46:28Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Enrico](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/enrico/32/144_2.png) [@Enrico](https://forums.fusetools.com/u/Enrico)\
**Post date:** [December 27, 2018, 1:46pm UTC](https://forums.fusetools.com/t/dinamically-add-textinput/7579/1 "2018-12-27T13:46:29Z")

</div>

The following code simulates fetching some data from a dB and it populates four `TextInput` named _serial_, _type_, _brand_ and _model_.

But suppose that I don’t know the names, nor the number of the dB fields until I query the dB. How can I “dynamically” create the `TextInputs`? And how can I give each of them a name (according to the fetched data) and make each of them Observable? As I did myself the API I can change it’s output as needed.

```
<App Background="#eee">
    <JavaScript>
        var Observable = require('FuseJS/Observable');
        var datas = Observable();
        
        // This represents some data fetched from a dB via API
        json = {
           "items": [
                {
                    "serial": "201850003555",
                    "type": "desktop",
                    "brand": "Yashi",
                    "model": "Integra"
                }
            ]
        };

        datas.replaceAll(json.items);

        module.exports = {
            datas: datas
        };

    </JavaScript>

    <StackPanel ItemSpacing="3" Margin="3" Background="#eee">
        <Each Items="{datas}">
            <MyTextInput Value="{serial}" />
            <MyTextInput Value="{type}" />
            <MyTextInput Value="{brand}" />
            <MyTextInput Value="{model}" />
        </Each>
    </StackPanel>

    <!-- ========================================================================== -->
    <Panel ux:Class="MyButton" HitTestMode="LocalBounds" Color="#25a" >
        <string ux:Property="Text" />
        <Text Value="{ReadProperty Text}" Color="#fff" Alignment="Center" Margin="30,15,30,15" />
        <WhilePressed>
            <Change this.Color="#138" Duration="0.05" DurationBack=".2" />
        </WhilePressed>
    </Panel>

    <TextInput ux:Class="MyTextInput" FontSize="20" PlaceholderColor="#ccc" Padding="5" Height="32">
        <Rectangle Layer="Background" CornerRadius="3">
            <Stroke Width="1" Color="#CCCCCC" />
            <SolidColor Color="White" />
        </Rectangle>
    </TextInput>
</App>
```