nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

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

Find more posts tagged with

Comments

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

dashboard_layout.png

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