AnsweredAssumed Answered

Add field to form dynamically

Question asked by stan on Jun 6, 2016
Latest reply on Jan 3, 2017 by kranthi
I need to store multiple contact persons related to some object. Persons are external to the system and won't be added as users/members.
So I've created an association with custom contact type in the model:

<blockcode>
        <aspect name="co:objectInfo">
            …
            <associations>
                <child-association name="co:contacts">
                    <source>
                        <mandatory>true</mandatory>
                        <many>false</many>
                    </source>
                    <target>
                        <class>co:contact</class>
                        <mandatory>false</mandatory>
                        <many>true</many>
                    </target>
                </child-association>
            </associations>
        </aspect>
</blockcode>

<blockcode>
        <type name="co:contact">
            <title>Contact Person</title>
            <parent>cm:cmobject</parent>
            <properties>
                <property name="co:person">
                    <type>d:text</type>
                    <mandatory>true</mandatory>
                </property>
                <property name="co:phone">
                    <type>d:text</type>
                    <mandatory>true</mandatory>
                    <multiple>true</multiple>
                </property>
            </properties>
        </type>
</blockcode>

When I create the object, I'd like to populate contacts data in create form. It should look like multiple person/phone text field pairs in UI.
My idea is to use Form Filters.

If we're talking about edit form, then it seems it is possible to implement this.
In beforeGenerate method we can fetch associations from NodeRef, dynamically create fields, populate them and add to form.
In beforePersist we can parse these fields (identifying them by some name prefix or postfix) and update associations.

But how can I add(/delete) an empty fields pair? I can provide some Add (and Delete) button in Freemaker template for my custom control, add JavaScript.
But I have not found any documentation or examples how can I do it using JavaScript.

It seems we have FormUI.options.fields property, but I'm not sure how to use it. Also I doubt if we can change form model after generation from client side.

Any information or examples how we can update form using client side JavaScript are highly appreciated.
Alternatively what are best practices if we need to manage multiple simple associations? It seems it is rather typical case.

Thanks in advance for any thoughts.

Outcomes