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