Special dashboard layout

[logxjb]

Hello,

I'm struggling trying to figure out the dashboard implementation and how I could use the grid system to create a dashboard with the following layout

<blockcode>
|=============== dashlet 2 columns wide =============||= dashlet 1 column wide =|
|= dashlet 1 column wide =||= dashlet 1 column wide =||= dashlet 1 column wide =|
</blockcode>

Basically, 3 columns of equal size but I would like the first dashlet to use 2 columns.

First of all, is this even possible on Alfresco ?
If yes, how could I achieve that within the template ftl and/or template-instances xml ?

Regards,
Jérémy

[logxjb]

I have found a way to do that:

- create a custom FTL template in /templates/org/alfresco/mydashboard.ftl
- create a custom template instance pointing to it /site-data/template-instances/dashboard-my.xml with this tag

<template-type>org/alfresco/mydashboard</template-type>‍

- create a share extension for the webscript "customise-layout.get.js" for adding the "dashboard-my" template instance in the list of available dashboards layout


I still encounter 2 problems

First the 3 dashlets on the second line aren't aligned with the 2 dashlets on the first line (see on the screenshot below)

This is the core code of the template … I don't understand why the second grid don't create larger dashlets that would make a full usage of the available width ?

<blockcode>
   <@markup id="bd">
      <div id="bd">
         <div class="yui-gc grid first columnSize2">
            <div class="yui-u first column1">
               <@region id="component-1-1" scope="page" />
            </div>
            <div class="yui-u column2">
               <@region id="component-2-1" scope="page" />
            </div>
         </div>
         <div class="yui-gb grid columnSize3">
            <div class="yui-u first column3">
               <@region id="component-3-1" scope="page" />
            </div>
            <div class="yui-u column4">
               <@region id="component-3-2" scope="page" />
            </div>
            <div class="yui-u column5">
               <@region id="component-4-1" scope="page" />
            </div>
         </div>
      </div>
   </@>
</blockcode>



Second, and maybe more weird. At my first attempt, I've created a <strong>5 columns</strong> template … this totaly screwed the original "customise-dashlets.get.js" which failed at line #122

columns[column-1][row-1] = dashlet;‍

I figured out that the variable declaration at line #84 was expecting 4 columns … no more

var columns = [[], [], [], []];‍

Since Alfresco added automaticaly a dashlet on column 5 … the script crash because it couldn't get to the needed index.

Now, I'm forced to edit the variable declaration directly in the exploded share war version of the script, otherwise I cannot access the customize dashboard page.

Regards,
Jérémy

[malliswar]

hi LogxJB,

i faced both the problem which you mentioned in above post

the answer to your first problem i.e allignment of 2nd row dashlets with the first row is the below file
/home/malliswarreddyb/alfresco-5.0.a/tomcat/webapps/share/css/yui-fonts-grids.css
you can define your custom css in this file so that the dashlets span full-page, and apply it to the div tags in your mydashboard.ftl

and for the second problem which you arleady answered by yourself that the below line causes

var columns = [[], [], [], []];

can be overcome by changing the line as  var columns = [[], [], [], [], [], [], [], []];

and also you have to change the no.of columns line in  customise-layout.get.js file to your requirement, say 5

here is a link in which i posted the custom layout that i created for my-site

https://forums.alfresco.com/user/45063/posts 

note: there are few problems when you create a new extra column in your layout