Forum Stats

  • 3,780,926 Users
  • 2,254,456 Discussions
  • 7,879,496 Comments

Discussions

Appending HTML to the template under oj-form-layout

festau
festau Member Posts: 8 Green Ribbon

Dear all,

I know this isn't specific to JET but I'm wondering if  there is a way of appending dynamically html template to the template tag of oj-form-layout.

Let's say we have an HTML file with a predefined template as follows:

<pre><code>

<oj-form-layout id="ofl1" max-columns="3">

          <oj-bind-for-each data="[[dynamicFormDataProvider]]">

            <template id ="myTemplate">

              <oj-bind-if test="[[$current.data.fieldType === 'inputText']]">

                <oj-input-text :id="[[$current.observableIndex]]" label-hint="[[$current.data.label]]"

                  value="{{$current.data.value}}" label-edge="inside" style="width: 20em;">

                </oj-input-text>

              </oj-bind-if>

              <oj-bind-if test="[[$current.data.fieldType === 'inputNumber']]">

                <oj-input-number :id="[[$current.observableIndex]]" label-hint="[[$current.data.label]]"

                  value="{{$current.data.value}}" label-edge="inside" style="width: 20em;">

                </oj-input-number>

              </oj-bind-if>

            </template>

          </oj-bind-for-each>

        </oj-form-layout>

</code></pre>

And we want dynamically add new case :

<pre><code>

<oj-bind-if test="[[$current.data.fieldType === 'inputDate']]">

            <oj-input-date :id="[[$current.observableIndex]]" label-hint="[[$current.data.label]]"

              value="{{$current.data.value}}" label-edge="inside" style="width: 20em;">

            </oj-input-date>

          </oj-bind-if>

</code></pre>

Thank you!

Comments

  • The oj-form-layout component does not support the changing of DOM structure after initial render. You can use oj-bind-if and oj-bind-for-each to build the initial structure, but you can not change that at runtime. The parent oj-form-layout does not know if it's children are changed so it cannot re-layout the content properly.

    You can wrap multiple oj-form-layouts inside of different bind-if statements and try that.