Custom Data-Lists Page

[ihs]

I need to create a new page based on "Data Lists Page". I have created these elements following the surf framework:

1. \shared\web-extension\site-data\pages\CustomDataList-page.xml

<?xml version='1.0' encoding='UTF-8'?>
<page>
<title>Custom Data List Page</title>
<title-id>page.customdatalist-page.title</title-id>
<description>Pagina de Tareas Personalizada</description>
<description-id>page.customdatalist-page.description</description-id>
<template-instance>CustomDataList-page</template-instance>
<authentication>user</authentication>
</page>‍‍‍‍‍‍‍‍‍

2. \shared\web-extension\site-data\template-instances\CustomDataList-page.xml

<?xml version='1.0' encoding='UTF-8'?>
<template-instance>
   <template-type>com/dev/CustomDataList-page</template-type>
   <properties>
      <pageFamily>data-lists</pageFamily>
      <container>dataLists</container>
   </properties>
   <components>
      <component>
         <region-id>title</region-id>
         <url>/components/title/collaboration-title</url>
      </component>
      <component>
         <region-id>navigation</region-id>
         <url>/components/navigation/collaboration-navigation</url>
      </component>
      <component>
         <region-id>actions-common</region-id>
         <url>/components/data-lists/actions-common</url>
      </component>
      <component>
         <region-id>toolbar</region-id>
         <url>/components/customdatalist/toolbar</url>
      </component>
      <component>
         <region-id>datagrid</region-id>
         <url>/components/data-lists/datagrid</url>
         <properties>
            <pagination>true</pagination>
         </properties>
      </component>
     <component>
         <region-id>datalists</region-id>
         <url>/components/customdatalist/tasklists</url>
      </component>
      <component>
         <region-id>filter</region-id>
         <url>/components/data-lists/filter</url>
      </component>
   </components>
</template-instance>

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

3. shared\web-extension\templates\com\dev\CustomDataList-page.ftl

<#include "/org/alfresco/include/alfresco-template.ftl" />
<@templateHeader>
   <script type="text/javascript">//<![CDATA[
   (function()
   {
      // If no location.hash exists, convert certain params in location.search to location.hash and replace the page
      var loc = window.location;
      if (loc.hash === "" && loc.search !== "")
      {
         var qs, q, url = loc.protocol + "//" + loc.host + loc.pathname, hash = "";

      <#if PORTLET>
         qs = {};
         <#if url.args.page??>qs.page = "${(url.args.page!"")?js_string}";</#if>
         <#if url.args.filter??>qs.filter = "${(url.args.filter!"")?js_string}";</#if>
      <#else>
         qs = Alfresco.util.getQueryStringParameters();
      </#if>

         var hashParams =
         {
            "page": true,
            "filter": true
         },
            filterDataParam = "filterData";

         for (q in qs)
         {
            if (qs.hasOwnProperty(q) && q in hashParams)
            {
               hash += "&" + escape(q) + "=" + escape(qs[q]);
               if (q === "filter")
               {
                  // Check for filterData in QueryString for the "filter" case
                  if (qs.hasOwnProperty(filterDataParam))
                  {
                     hash += escape("|" + qs[filterDataParam]);
                     delete qs[filterDataParam];
                  }
               }
               delete qs[q];
            }
         }
         
         if (hash.length > 0)
         {
         <#if PORTLET>
            top.location.hash = hash.substring(1);
         <#else>
            url += Alfresco.util.toQueryString(qs) + "#" + hash.substring(1);
            window.location.replace(url);
         </#if>
         }
      }
   })();
   //]]></script>
   <script type="text/javascript">//<![CDATA[
      new Alfresco.widget.Resizer("DataLists");
   //]]></script>
   <@script type="text/javascript" src="${url.context}/res/modules/data-lists/datalist-actions.js"></@script>
</@>

<@templateBody>
   <div id="alf-hd">
      <@region id="header" scope="global" protected=true />
      <@region id="title" scope="template" protected=true />
      <@region id="navigation" scope="template" protected=true />
   </div>
   <div id="bd">
      <@region id="actions-common" scope="template" protected=true />
        <div class="yui-t1" id="alfresco-data-lists">
           <div id="yui-main">
              <div class="yui-b" id="alf-content">
                <@region id="toolbar" scope="template" protected=true />               
                <@region id="datagrid" scope="template" protected=true />
              </div>
           </div>
           <div class="yui-b" id="alf-filters">
               <@region id="datalists" scope="template" protected=true />
           </div>
        </div>
   </div>
</@>

<@templateFooter>
   <div id="alf-ft">
      <@region id="footer" scope="global" protected=true />
   </div>
</@>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

4. Finally, I have created a webscripts for each component:
/components/customdatalist/toolbar  and
/components/customdatalist/tasklists

This page works correctly, I can see the page available when I am configuring my site, but I have a problem. The first time I click on the page, the toolbar and the list are correct (my custom components) but when I click on a data-list (that appears in the list), the page shows all default components, including the default toolbar and the default list of data-list. In addition, I can see the filter section, but this section was deleted in my custom page (therefore, filter doesn't appear the first time). How can I change this behaviour??

Thanks, and sorry for my english.

[cchumi]

Hi did you solve your problem ?

In fact there is other files to be modify or duplicated .

I've just experienced the same problem as you and if you search in datalist-min.js.

All of the link are redirect in data-lists components so it's the reason for retrieving the default page when clicking on a list.
If i remember it's hardcode in the JS so the better way is to duplicate the file in your component.

in the file datalist you will find this line which is the link when you click on a list on the left :

elLink.href = "list-data-list?list=" + $html(list.name);‍

you have to change list-data-list with the name of your component. This is how I solve my problem.

Perhaps the name are different I'm not behind my dev computer.

Hope this help