Multi input repeatable panel: how to?

[orazionelson]

Hi all,
I'm looking for a way to have a group of inputs repeatable with an ADD button.

The data source is from the titleStmt/respStmt in a TEI file:

`    <teiHeader>
        <fileDesc>
            <titleStmt>
                <title>Per le università di Sessa e del terziere di Toraldo</title>
                <author>Leone Ostiense</author>
                <author>Pietro Diacono</author>
                <respStmt>
                    <resp>transcription by</resp>
                    <name>John Doe</name>
                </respStmt>
                <respStmt>
                    <resp>mark-up by</resp>
                    <name>Janet Doe</name>
                </respStmt>
            </titleStmt>
...`

My source looks like this:

`<fx-group ref=".//titleStmt">
	<details>
		<summary>respStmt</summary>
		<fx-repeat name="respStmt" ref="respStmt" id="respStmts">
			<fx-group ref=".">
				<template>
					<div class="form-group row">
						<div class="col-md-5">
							<fx-control ref="resp">
								<select name="resp" class="widget form-control">
									<option value="transcription by">transcription by</option>
									<option value="revision by">revision by</option>
									<option value="mark-up by">mark-up by</option>
								</select>
							</fx-control>
						</div>
						<div class="col-md-5">
							<fx-control ref="name"><input class="widget form-control"/></fx-control>
						</div>
						<div class="col-md-2">
							<fx-trigger class="deleteIcon">
								<button class="btn btn-primary">x</button>
								<fx-delete ref="."></fx-delete>
							</fx-trigger>
						</div>
					</div>    
				</template>
			</fx-group>
		</fx-repeat>
		<fx-trigger>
			<button>add resp</button>
			<fx-insert ref="respStmt"></fx-insert>
		</fx-trigger>	
	</details>
</fx-group>`

It works but when I click on the Add button I see an empty space:

[JoernT]

could you please edit the above again to be formatted - just mark the texf and click the 'add code' button above.

[JoernT]

at first sight you have some additional element inside fx-repeat - try removing that so that there's only the <template> element.

[orazionelson]

It almost works
If I remove additional elements inside fx-repeat:

		<fx-repeat name="respStmt" ref="respStmt" id="respStmts">
				<template>
					<div class="form-group row">
						<div class="col-md-5">
								<select name="resp" class="widget form-control">
									<option value="transcription by">transcription by</option>
									<option value="revision by">revision by</option>
									<option value="mark-up by">mark-up by</option>
								</select>
						</div>
						<div class="col-md-5">
							<input class="widget form-control"/>
						</div>
						<div class="col-md-2">
							<fx-trigger class="deleteIcon">
								<button class="btn btn-primary">x</button>
								<fx-delete ref="."></fx-delete>
							</fx-trigger>
						</div>
					</div>    
				</template>
		</fx-repeat>

Adding a new line I see al the inputs in the panel, but It doesn't catch data from the source file:

[JoernT]

sorry - this also shows only 'part of the truth' - to really judge it i'll also need a look at the instance data - best in such cases really is a gist where you add your files for inspection.

[JoernT]

in the markup above you forgot the fx-control elements:

<template>
					<div class="form-group row">
						<div class="col-md-5">
                                                       <fx-control ref="resp">
								<select class="widget form-control">
									<option value="transcription by">transcription by</option>
									<option value="revision by">revision by</option>
									<option value="mark-up by">mark-up by</option>
								</select>
                                                      </fx-control>
						</div>
						<div class="col-md-5">
                                                     <fx-control ref="name"></fx-control>
						</div>
						<div class="col-md-2">
							<fx-trigger class="deleteIcon">
								<button class="btn btn-primary">x</button>
								<fx-delete ref="."></fx-delete>
							</fx-trigger>
						</div>
					</div>    
				</template>
		</fx-repeat>

As input is the default control you don't need to write it explicitly in the second fx-control.

[orazionelson]

Thanks, introducing the fx-control the problem is the same as my first attempt: I see an empty box without fields inside.

I made the gist as you asked:

https://gist.github.com/orazionelson/9eef481e8c083057461b24ef583a03ba

Thank you very much,
Alfredo

[JoernT]

@orazionelson you hit a bug indeed. When inserting i see that it inserts fine but without the child elements <resp> and <name>. That why there are no controls. If there's nothing they can bind to they become nonrelevant.

There's a workaround however by using the origin attribute like so:

<fx-insert ref="respStmt" origin="instance('templates')//respStmt"></fx-insert>

however you need to create a xml file containing the template looking like this:

<data>
    <respStmt>
        <resp></resp>
        <name></name>
    </respStmt>
</data>

Finally add the instance to your model:

     <fx-instance id="templates" src="templates.xml"></fx-instance>

That should be an external file not an inline instance.

I'll create a testcase to fix that issue but might take some time.

[orazionelson]

Great the workaround works!

[cwittern]

I have hit the same problem and am trying to work around as suggested here.
I will try to generate the fore-html file dynamically from the source and take care of not yet existing, but potentially needed elements through this template approach.

Now my question is: Why does the template file has to be external? Would it not possible to create the template inline and refer to it via the ID? What about proper namespaces for the templates?

[JoernT]

Inline instances are parsed as HTML DOM and therefore e.g. do not support namespaces, empty elements etc. The latter do work but just because the browsers are forgiving.

If you want to use proper XML an instance needs to be external - in that case they are parsed as XML DOM instead of HTML DOM.

Namespacing is done like this:

<fx-instance id="default" src="data/segmentation.xml" xpath-default-namespace="http://www.tei-c.org/ns/1.0"></fx-instance>
        
        <fx-instance id="i-template"
                     src="data/template.xml"
                     xpath-default-namespace="http://www.tei-c.org/ns/1.0"></fx-instance>

To avoid the need for XPath prefixing e.g. 'tei:header' and allow easier addressing the `xpath-default-namespace' attribute can be used to set the default namespace for XPathes.

Fore is following a very pragmatic approach here. Experience from years of using XForms before we almost never had to deal with mixed namespaces in one instance so that's not supported for now.

Of course we could go with xhtml and implement proper namespaces but Fore tries to avoid namespaces in the container which always confused users and even was a major hinderance for users to adopt XForms back then. Same btw is true for xhtml nowdays i fear. Nobody in the web world really likes to deal with them.

So the approach is to keep it as simple as possible while still allowing proper XML (as external instance).

As such - inline instances are for all those cases where namespaces are not needed at all - which is rather often the case or at least covers a lot of use cases.

Maybe there would be a way to turn inline instances into full-blown XML but i have limited resources, so didn't follow that path yet. Hopefully Fore can get some funding by commercial use so future is open. You can help it by spreading the word ;)

[cwittern]

Dear Joern,
Thanks for this explanation, I now understand. I will try to implement this accordingly.