Creating a master-detail not working with version 17

Hello!
I’m trying to replicate a master-detail structure like the example in the documentation (https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/Tutorials/MasterDetailTutorial/) but I can’t get it to work. If I install the example XAR provided in the documentation, it works correctly, but if I follow the steps to create an application exactly the same, I can’t get it to work.
I’ve noticed that when creating an AWM, the pages, classes, etc., differ from what’s published in the documentation (for example, StateCode.StateClass, if I’m not mistaken, should now be State.Code.StateClass). I’ve attached an image of the XAR structure (the one in the example and the one I’m creating) to show the differences. I’ve tried adapting it, but I can’t get it to work.
Any suggestions on where I might be going wrong?
Thank you very much.

Indeed, since https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/Tutorials/MasterDetailTutorial/ was written, XWiki has improved to support nested pages and AWM uses nested pages now for creating the various technical pages (inside a Code space as you’ve noticed).

Could you list what you’ve updated and what doesn’t work?

Thx

I’ll try to follow the tutorial to see what I get.

1 Like

Here’s what I’ve modified:

  • I created the AWM “IslasData” (similar to the “StateData” entry in the example), and as you can see in the image I attached in the initial post, the application structure is not created the same way. I’m adding entries to that AWM.

  • I created the AWM “Islas” and adapted the ClassName from where to retrieve the select values.

  • I modified the IslasSheet according to the example, again adapting the document names to use according to the structure.

{{velocity}}
{{html wiki="true"}}
#set ($discard = $doc.use('Islas.Code.IslasSheet'))
(% class="xform" %)
(((
  <dl>
    <dt><label for="Islas.Code.IslasClass_0_provincia">$escapetool.xml($doc.displayPrettyName('provincia', false, false))</label></dt>
    <dd>$doc.display('provincia')</dd>
    <dt><label for="Islas.Code.IslasClass_0_isla">$escapetool.xml($doc.displayPrettyName('isla', false, false))</label></dt>
    <dd>
      #if ($xcontext.action == 'edit')
        $xwiki.jsx.use('Islas.Code.IslasClass')
        <select id="Islas.Code.IslasClass_0_isla" name="Islas.Code.IslasClass_0_isla" size="1">
          <option></option>
        </select>
      #else
        $!doc.getValue('isla')
      #end
    </dd>
  </dl>
)))
{{/html}}
{{/velocity}}
  • I added the Javascript extension (and this is where I have the most doubts, as I’m not sure if the error might be in the escape characters \).
require(['jquery'], function ($) {
    var stateSelect = $('#Islas\\.Code\\.IslasClass_0_provincia');
    var citySelect = $('#Islas\\.Code\\.IslasClass_0_isla');    
    var jsonDocument = new XWiki.Document('WebHome', 'Islas.Code.JSON');
    stateSelect.change(function() {
      $.get(jsonDocument.getURL('get', 'outputSyntax=plain&state=' + stateSelect.val()), function(json) {
        var output = '';
        $.each(json, function(index, value) {
          output += '<option>' + value + '</option>';
        });
        citySelect.empty().append(output);
      });
    });
});
  • I created the Json.
{{velocity}}
#if($xcontext.action == 'get' && "$!{request.outputSyntax}" == 'plain')
  $response.setContentType('application/json')
#end
#set($list = [])
#set ($state = $request.provincia)
#if ("$!state" != '')
  #set ($itemList = $services.query.xwql("where doc.object(IslasData.Code.IslasDataClass).provincia like :state").bindValue('state', $state).execute())
  #foreach ($item in $itemList)
    #set ($itemDoc = $xwiki.getDocument($item))
    #set ($discard = $list.add($itemDoc.getValue('city')))
  #end
  $jsontool.serialize($list)
#end
{{/velocity}}
  • And the initial dropdown is displayed correctly (although the values are duplicated), but the next one doesn’t load anything.

Thanks!!!

Ok I got it to work. There’s an error in the documentation:

Note that we’re using a Javascript Skin Extension that we’ll be creating in the current page (i.e. StateCode.StateSheet): #set ($discard = $doc.use(‘StateCode.StateSheet’))

It should be:

Note that we’re using a Javascript Skin Extension that we’ll be creating in the State.Code.StateClass page: $xwiki.jsx.use('State.Code.StateClass')

I’ll fix the documentation.

I just have a last problem, it’s that I get duplicates for the states:

Screenshot 2025-03-26 at 15.26.55

I need to figure out why this is.

1 Like

I have repeated the steps according to the tutorial update and now it seems to work for me. I must have missed something in the previous tests but now it seems to work. The same thing happens to me with the duplicates, I will also check it to see if I see anything.
Thank you so much!!!