[the_other_guy]

work in progress
if you have any tips please share 
if you can make things easier to understand please share 

https://kodi.wiki/view/Estuary_Modification

Adding menu and accompanying  screen
how the menu and widget screen are linked

xml:


<item>

<label>$LOCALIZE[1]</label>

<onclick>ActivateWindow(Pictures)</onclick>

<property name="menu_id">$NUMBER[4000]</property>

<thumb>icons/sidemenu/pictures.png</thumb>

<property name="id">pictures</property>

<visible>!Skin.HasSetting(HomeMenuNoPicturesButton)</visible>

</item>

right screen

<control type="group" id="4000">

     <visible>String.IsEqual(Container(9000).ListItem.Property(id),pictures)</visible>

     <include content="Visible_Right_Delayed">

      <param name="id" value="pictures"/>

     </include>

     <control type="grouplist" id="4001">

      <include>WidgetGroupListCommon</include>

      <include content="WidgetListCategories" condition="!Skin.HasSetting(HomeMenuNoPicturesButton)">

       <param name="content_path" value="sources://pictures/"/>

       <param name="widget_header" value="$LOCALIZE[20094]"/>

       <param name="widget_target" value="pictures"/>

       <param name="list_id" value="4100"/>

       <param name="icon_height" value="110"/>

      </include>

     </control>

     

    </control>

<item> menu item tag
    <label>$LOCALIZE[1]</label> name of menu in this one it is = to pictures
    <property name="menu_id">$NUMBER[4000]</property> this is the number linked to the groups
    <control type="group" id="4000"> <control type="grouplist" id="4001"> <param name="list_id" value="4100"/>
    <onclick>ActivateWindow(Pictures)</onclick> ActivateWindow or plugin or node
    <thumb>icons/sidemenu/pictures.png</thumb> image thumb icon
    <property name="id">pictures</property> is the same
<visible>String.IsEqual(Container(9000).ListItem.Property(id),pictures)</visible>
    and <param name="id" value="pictures"/>
    <visible>!Skin.HasSetting(HomeMenuNoPicturesButton)</visible> not needed unless you are going to hide it
    </item> close item tag
    missing from pictures but needed for widget rows is <pagecontrol>menu_id010</pagecontrol> and it uses the same menu_id 010
    and and is placed after  <include>WidgetGroupListCommon</include> and after widget rows is <include content="WidgetScrollbar" condition="Skin.HasSetting(touchmode)">
      <param name="scrollbar_id" value="menu_id010"/>
     </include>
Example of how this works kids zone edit home.xml

xml:


 <item>

               <label>kids zone</label>

               <onclick>ActivateWindow(10025,&quot;plugin://plugin.video.youtube/kodion/search/list/&quot;,return)</onclick>

              <property name="menu_id">$NUMBER[30000]</property>

              <thumb>icons/sidemenu/kids.png</thumb>

             <property name="id">kidszone</property>

             </item>

xml:
    

 <control type="group" id="21000"> add before <control type="group" id="30000">

     <visible>String.IsEqual(Container(9000).ListItem.Property(id),kidszone)</visible>

     <include content="Visible_Right_Delayed">

      <param name="id" value="kidszone"/>

     </include>

     <control type="grouplist" id="30001">

      <include>WidgetGroupListCommon</include>

      <pagecontrol>30010</pagecontrol>

      Widgets can be added from a node (library://video/movies/) see kodi node library examples https://forum.kodi.tv/showthread.php?tid=344482

      

      <include content="WidgetListPoster" condition="Library.HasContent(movies)">

       <param name="content_path" value="special://skin/playlists/unwatched_movies.xsp"/>

       <param name="widget_header" value="$LOCALIZE[31007]"/>

       <param name="widget_target" value="videos"/>

       <param name="list_id" value="30300"/>

      </include>

      <include content="WidgetListPoster" condition="Library.HasContent(movies)">

       <param name="content_path" value="special://skin/playlists/random_movies.xsp"/>

       <param name="widget_header" value="$LOCALIZE[31006]"/>

       <param name="widget_target" value="videos"/>

       <param name="list_id" value="30400"/>

      </include>

      </control>

      <include content="WidgetScrollbar" condition="Skin.HasSetting(touchmode)">

      <param name="scrollbar_id" value="5010"/>

     </include>

     </control>

content screen


the <param name="list_id" value="30300"/> of the next widget needs to be higher then the one before <param name="list_id" value="30310"/>