Scoping a layout to a theme

We can scope layouts so that only certain ones show up in the Layout tab of the site toolbar. The IBM WebSphere Portal 8.0 theme included with the portal uses this technique.

1. Decide which layouts to scope to the theme. The layouts do not all need to come from the same place.

2. Log on to WebDAV at...
   dav:fs-type1/themes/myCustomTheme/system

3. Edit changeLayout.json

   The ibmCfg.themeConfig.themeRootURI variable is initialized to the value of the WebDAV root folder of the theme used on the current page. Change the file contents to point to a layouts.json file that holds the scoped layouts:

   {
           localizationPackageName:"com.ibm.bundles", localizationBundleName:"Shelf", categories:
           [ {
           "label":"add_content_all", "searchStr":"shelf_searchAll", "datastore":"com.ibm.data.JsonStore", "url":ibmCfgethemeConfig.themeRootURI+"/system/layouts.json"
           } ]
   }

4. Edit layouts.json in WebDAV at dav:fs-type1/themes/myCustomTheme/system. If the file does not exist, create the file.

   1. Make sure that the file has the following content:
      {
              localizationPackageName:'com.ibm.bundles', localizationBundleName:'Shelf', identifier:'label', items: [ ]
      }
      

   2. For each scoped layout in dav:fs-type1/themes/myCustomTheme/layout-templates, add an entry like the following to the JSON array in layouts.json. For example, here is an entry for a layout stored in WebDAV at dav:fs-type1/themes/myCustomTheme/layout-templates:
      {'label':'My Layout','url':'dav:themelist/myCustomTheme/layout-templates/myLayout/','id':'myLayout', 'thumbnail':ibmCfg.themeConfig.themeRootURI+'/layout-templates/myLayout/icon.gif','help':''}

5. Refresh the browser cache.

6. Reload the page to view the scoped layouts in the Layout tab of the site toolbar.

Parent: Layouts