Orbeon Forms community mailing list

Displaying only applicable field of instance

Classic

List

Threaded

2 messages Options

Vedha

Displaying only applicable field of instance

I need to display particular field which of applicable for the current focused component.

In the below example, there are three instance of "fruit" inside "fruits". I need to design like, to display all the fruit names alone in the left panel and when that particular field (fruit name) gets focus, then system shall display the other attributes(for example benefits) of that particular fruit. At a time, it should display one particular focused fruit attributes.

Also, i need to write constraints for the attributes of fruit.

Could you give some sample for this. We are just learning xforms.

Example:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xxf="http://orbeon.org/oxf/xml/xforms"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<head>

<script type="text/javascript"> alert("Loading"); </script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script><script> var app = angular.module("myApp", []); </script><script> jQuery.browser = {}; (function () { jQuery.browser.msie = false; jQuery.browser.version = 0; if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) { jQuery.browser.msie = true; jQuery.browser.version = RegExp.$1; } })(); </script><title>Guess The Number</title>
<xf:model>

<xf:bind ref="instance('mdl')/fruit"
relevant="instance('mdl')/control = 'true'" />

<xf:instance id="mdl">
<fruits xmlns="">
<fruit>
<name>Apple</name>
<category>Fruit</category>
<benefits>Good for health</benefits>
</fruit>
<fruit>
<name>Orange</name>
<category>Fruit</category>
<benefits>Good for skin</benefits>
</fruit>
<fruit>
<name>Banana</name>
<category>Fruit</category>
<benefits>Good for digestion</benefits>
</fruit>
<control>true</control>
</fruits>
</xf:instance>

<xf:instance id="newFruit">
<fruit xmlns=""> <name></name> <category></category> </fruit>
</xf:instance>
</xf:model>
</head>
<body>

My Page

<xf:input ref="instance('mdl')/user-id" />

<div ng-app="myApp">

<p>
Name: <input type="text" ng-model="name" />
</p>
<p>You wrote: {{ name }}</p>

</div>
<xf:input nodeset="instance('mdl')/control" />
<xf:repeat nodeset="fruit" id="fruit-repeat">
<xf:group ref=".">
<xf:label style="display : inline;">Name: </xf:label>
<xf:input ref=".//name" />

</xf:group>

<xf:input ref=".//benefits" />
</xf:repeat>

<xf:input ref="instance('newFruit')/fruit" />
<br />

<xf:trigger>

<xf:label>Add fruit</xf:label>

<xf:insert ev:event="DOMActivate" context="."
nodeset="fruit" origin="instance('newFruit')" />

</xf:trigger>
<fr:xforms-inspector xmlns:fr="http://orbeon.org/oxf/xml/form-runner" />

<br />
<xf:output value="instance(mdl)//fruits" />
<script type="text/javascript">
$(document).ready(function(){
alert('Loading');
});
alert("Loading");
$(document).ready(function(){
alert('Loading');
});

</html>

Vedha

Re: Displaying only applicable field of instance

I got this working, if anyone need let me know.