condition for Widget on create mode

I'm using Nuxeo IDE , and i want to display a drop down list in my creation layout form , this drop down list should be displayed only if another drop down list is filled with a certain value , can anyone show me how to do that , normally i should use JavaScript but i don't know how to use with my widgets . In this link i could find an example but only for Nuxeo studio

With the code below, the drop down list is displayed only after saving the document, so we have to edit it in order to fill the field, but i want to have the drop down list displayed while i'm creating the document :

<widget name="civilite" type="suggestOneDirectory">
        <labels>
          <label mode="any">Civilité</label>
        </labels>
        <translated>true</translated>
        <fields>
          <field>rens:civilite</field>
        </fields>
        <properties mode="any">
          <property name="width">300</property>
          <property name="labelFieldName">label_{lang}</property>
          <property name="dbl10n">true</property>
          <property name="minChars">0</property>
          <property name="hideHelpLabel">true</property>
          <property name="directoryName">civilite_directory</property>
          <property name="keySeparator">/</property>
          <property name="placeholder">Civilité</property>
          <property name="documentSchemas">dublincore,layout_demo_schema</property>
          <property name="repository">default</property>
        </properties>
        <controls mode="any">
          <!-- enable ajax submit on change/click/select on demo application -->
          <control name="supportInsideInputWidgetEffects">true</control>
    </controls>
    <widgetModes>
          <mode value="any">#{layoutValue.rens.statut=='Prospect'?'create':'hidden'}</mode>
        </widgetModes>
    </widget>

*Here is what i have in my layout : *

<widget name="civilite" type="template">
        <labels>
          <label mode="any">
            Civilité 
          </label>
        </labels>
        <helpLabels>
          <label mode="any">
            label.local.configuration.theme.flavorSelection.help
          </label>
        </helpLabels>
        <translated>true</translated>
        <fields>
          <field>rens:civilite</field>
        </fields>
        <properties mode="any">
          <property name="template">
            /widgets/select_flavor_widget_template.xhtml
          </property>


      </widget>

*For displaying values of the first drop down list in JSF , i've done this : * select_flavor_widget_template.xhtml

<h:form>
  <h:panelGrid columns="3" styleClass="dataInput"
      columnClasses="labelColumn, fieldColumn, fieldColumn">

     <h:selectOneMenu id="thekeywords" value="#{field}">
        <f:selectItems value="#{ocrManager.availableCivilites}" />
      </h:selectOneMenu>
      <h:commandButton action="#{ocrManager.changeData}"
        value="Valider" />
    </h:panelGrid>
 </h:form>

and in bean :

private String civilite;
    protected List<SelectItem> civiliteList;

    public String getCivilite() {
        if (civilite == null) {
            return "";
        } else {
            return civilite;
        }
    }

    public void setCivilite(String s) {
        civilite = s;
    }

    public List<SelectItem> getAvailableCivilites() throws ClientException {
        if (civiliteList == null) {
            computeciviliteValues();
        }
        return civiliteList;
    }

    private void computeciviliteValues() throws ClientException {
        DirectoryService dirService;
        try {

            dirService = Framework.getLocalService(DirectoryService.class);
        } catch (Exception e) {
            throw new ClientException(e);
        }

        Session dir = null;
        try {
            dir = dirService.open("civilite_directory");
            DocumentModelList entries = dir.getEntries();
            civiliteList = new ArrayList<SelectItem>(entries.size());
            for (DocumentModel e : entries) {
                String value = (String) e.getProperty("civilite", "id");
                String label = (String) e.getProperty("civilite", "label_fr");
                SelectItem item = new SelectItem(value, label);
                civiliteList.add(item);
            }
        } finally {
            if (dir != null) {
                dir.close();
            }
        }
    }
    @Observer(value = { EventNames.DOCUMENT_SELECTION_CHANGED }, create = false)
    public void resetCiviliteValues() {
    }
public void changeData() throws ClientException {

            DocumentModel doc = navigationContext.getCurrentDocument();

            // create an empty document model (this object is created in memory - it is not yet stored in the repository)
            DocumentModel document = documentManager.createDocumentModel(doc.getPathAsString(), title, "renseignements");

            // now set some basic properties like a title and a description.


            document.setProperty("renseignements", "civilite", civilite);

            documentManager.saveDocument(document);
            documentManager.save();

        }

So now the value of the first drop down list is saved in rens:civilite , now i'm looking for a way to change dynamically the visibility of the second drop down list based on the the value of the first one and how i should add in my layout in order to be saved in rens:nbrenfants

0 votes

1 answers

2462 views

ANSWER



Hi,

It seems that you are looking for https://doc.nuxeo.com/x/Phw5AQ (if you'd like the drop down to be displayed or hidden in Ajax in the current view).

Using JavaScript to hide or show the widget would not make it possible to control the field validation (in case the value is required for instance, if the widget is hidden only in JavaScript, this validation would still be performed). That is why this documentation is using Ajax requests to show or hide the widget in the page.

Hope this helps

1 votes



Thank you Anahide Tchertchian , i see that in the example you gave me, that there are many java classes used : ThemeStylingServiceImpl.java , Flavor, … and it's not really clear for me. Is there a way to directly map a schema to a java bean in order to use it in jsf ?
12/07/2015

There aren't that many used classes, if you look at the first use case, which seems to suit your case. I don't see where you found ThemeStylingServiceImpl.java, and flavor is merely used as a variable. Maybe you mean "flavors" (again a variable), filled in with themeConfigurationActions.getAvailableFlavors(themeActions.defaultTheme)} but it is of no consequence: it is a set, so flavors just contains a list of items with a name and a label.
12/08/2015

Thank you Greg Drayon for replying, now i understand how it's working, but i have a problem when trying to save , can you see my update ?
12/08/2015

At first sight, I would say that your the keywords selectOneMenu is linked to your bean for its value, but is not linked to a metada property to be saved.
12/08/2015

Greg Drayon can you tell me how can i link it to a metadata property, or point me to a link ?
12/08/2015

I think a little more information is need about how you want it to work. To sum up, and correct me if I'm wrong: you want the "rens:civilite" metadata to be filled in with a value from a dropdown list, which has to be displayed only if an other dropdown list is set to a particular value. I don't have given any information about this previous dropdown list, so: is it linked to a metadata?

If so, based on this example (always the same one), I guess both dropdown list should be declared within the same widget, and this widget should have to declared fields: the metadata from the previous dropdown list and "rens:civilite".

Also, where exactly have you written your thekeywords selectOneMenu? Is it a xhtml file used by a widget? Which one? Sorry if I ask for a lot, but I try to get a general idea about where exactly you are.

12/09/2015

Thank you Greg Drayon, actually rens:civilite is linked to the first drop down list and the second one which will be displayed based on value of the first should also be linked to rens:nbrenfants. I've edited my question , can you see the update ?
12/09/2015

Maybe something like this? It's just a rough draft.

&amp;lt;h:panelGroup&amp;gt;
  &amp;lt;nxu:set var=&quot;availableCivilites&quot;
    value=&quot;#{ocrManager.availableCivilites&quot;
    cache=&quot;true&quot;&amp;gt;
    &amp;lt;h:selectOneListbox id=&quot;#{widget.id}&quot; value=&quot;#{field_0}&quot;&amp;gt;
      &amp;lt;nxu:selectItems
        var=&quot;civilite&quot; value=&quot;#{availableCivilites}&quot;
        itemValue=&quot;#{civilite.name}&quot; itemLabel=&quot;#{messages[civilite.label]}&quot; /&amp;gt;
      &amp;lt;f:attribute name=&quot;sourceComponentId&quot; value=&quot;#{widget.id}&quot; /&amp;gt;
      &amp;lt;f:attribute name=&quot;targetComponentId&quot; value=&quot;#{widget.id}_valueHolder&quot; /&amp;gt;
      &amp;lt;f:ajax execute=&quot;@this&quot; render=&quot;#{widget.id}_preview&quot;
        listener=&quot;#{selectionActions.setValueFromComponent}&quot;
        id=&quot;#{widget.id}_ajax_select&quot; /&amp;gt;
    &amp;lt;/h:selectOneListbox&amp;gt;
  &amp;lt;/nxu:set&amp;gt;
  &amp;lt;h:message for=&quot;#{widget.id}&quot; id=&quot;#{widget.id}_message&quot;
    styleClass=&quot;errorMessage&quot; /&amp;gt;
&amp;lt;/h:panelGroup&amp;gt;

&amp;lt;nxu:valueHolder id=&quot;#{widget.id}_valueHolder&quot;
  var=&quot;selectedCiviliteValue&quot;
  defaultValue=&quot;M.&quot;
  submitValue=&quot;false&quot;&amp;gt;
  &amp;lt;a4j:outputPanel id=&quot;#{widget.id}_preview&quot; layout=&quot;block&quot;&amp;gt;
    &amp;lt;nxu:set var=&quot;selectedCivilite&quot;
      value=&quot;#{ocrManager.getCiviliteById(selectedCiviliteValue)}&quot;
      cache=&quot;true&quot;&amp;gt;
      &amp;lt;c:choose&amp;gt;
        &amp;lt;c:when test=&quot;#{! empty selectedCivilite and selectedCivilite.id != &apos;M.&apos;}&quot;&amp;gt;
        &amp;lt;h:selectOneListbox id=&quot;#{widget.id}_nb_enfants&quot; value=&quot;#{field_1}&quot;&amp;gt;
        &amp;lt;nxu:selectItem /&amp;gt;
        &amp;lt;nxu:selectItem /&amp;gt;
        &amp;lt;nxu:selectItem /&amp;gt;
        &amp;lt;/h:selectOneListbox&amp;gt;
        &amp;lt;/c:when&amp;gt;
      &amp;lt;/c:choose&amp;gt;
    &amp;lt;/nxu:set&amp;gt;
  &amp;lt;/a4j:outputPanel&amp;gt;
&amp;lt;/nxu:valueHolder&amp;gt;

field_0 should be rens:civilite and field_1 rens:nbrenfants in your widget declaration.

12/10/2015

Thank you so much Greg Drayon for your help. Can you tell me more about value="#{themeActions.getFlavor(selectedCiviliteValue)}"
12/09/2015

My bad, it was a copy/paste mistake. I edited to what I think should do the trick. I have to say that I don't have what to test right know, nor do I know what selectedCiviliteValue hold as value. So "ocrManager.getCiviliteById()" is just a guess of what should be used.
12/10/2015

I'll try it, thank you Greg Drayon
12/10/2015