How to create a custom header in share

To create a custom header in share server side , I follow this blog http://blogs.alfresco.com/wp/developer/2013/09/04/customizing-the-share-header-menu-part-1/ .

First of all, add the following lines of code  share-header.get.js.

Part-I ( Server side )

var myMenu = widgetUtils.findObject(model.jsonModel, "id", "HEADER_APP_MENU_BAR");
if (myMenu != null)
{
myMenu.config.widgets.push(
    {
      id: "HEADER_CUSTOM_MENU",
      name: "alfresco/menus/AlfMenuBarPopup",
      config: {
        label: "Custom Menu",
         widgets: [
                 {
                    name: "alfresco/header/AlfMenuItem",
                    config: {
                       label: "Menu One"             
                     }
                 },
                 {
                    name: "alfresco/header/AlfMenuItem",
                    config: {
                       label: "Menu Two"
                              }
                 },
                 {
                    name: "alfresco/header/AlfMenuItem",
                    config: {
                       label: "Menu Three"
                    }
                 },
                 {
                    name: "alfresco/header/AlfMenuItem",
                    config: {
                       label: "Menu Four"       
                          }
                 }
              ]      }
    }
  );  
// Add the client side menu creation snippet here
}

Put your share-header-get.js file in org.alfresco.share.header.custom-header folder
Don't forget to create your extension module

<extension>
   <modules>
      <module>
         <id>My CustomMenu</id>
         <auto-deploy>true</auto-deploy>
         <version>1.0</version>
         <customizations>
            <customization>
               <targetPackageRoot>org.alfresco.share.header</targetPackageRoot>
               <sourcePackageRoot>custom-header</sourcePackageRoot>
           </customization>
         </customizations>
      </module>
   </modules>
</extension>

The above snippet will add a menu called "Custom Menu" with four drop downs in header.

Part-I ( Client side )
Now we will try to create a header in client side as well ,like in share 4.2.c and prior versions.
So I ll create  the same menu in client side using dojo. Here I go. Add the below lines of code in share-header-get.js

myMenu.config.widgets.push(
    {
      id: "HEADER_CLIENT_SIDE_MENU",
      name: "alfresco/header/ClientSideMenu",
      config: {
                  label: "Client Side Menu",
              }
    }
  );

Create two javascript files called  ClientSideMenu.js ,ClientSideMenu-min.js and it should contain the following dojo snippets.

define(["dojo/_base/declare",
        "alfresco/header/AlfMenuBarPopup",
        "alfresco/core/CoreXhr",
        "dojo/_base/lang",
        "dojo/_base/array",
        "dojo/aspect",
        "dijit/registry",
        "alfresco/menus/AlfMenuGroup",
        "alfresco/header/AlfMenuItem",
        "alfresco/header/AlfCascadingMenu",
        "dojo/dom-style",
        "dijit/popup"],
        function(declare, AlfMenuBarPopup, AlfXhr, lang, array, aspect, registry, AlfMenuGroup, AlfMenuItem, AlfCascadingMenu, domStyle, popup) {
           return declare([AlfMenuBarPopup, AlfXhr], { 
              widgets: [
                 {
                    name: "alfresco/header/AlfMenuItem",
                    config: {
                       label: "Menu Five"
                    }
                 },
                 {
                    name: "alfresco/header/AlfMenuItem",
                    config: {
                       label: "Menu Six"
                    }
                 }
              ],  
   });
});

This will create a menu called "Client Side Menu" along with two drop downs Menu Five and Menu Six. Here no need to add this js files in share-config-custom.xml file in order to manage the dependency as in share 4.2.c or prior. Those days now gone. That it!!

How to disable the rich text control in share using JS

I was trying with read-only="true" to disable the rich text control for meta data in share-config-custom.xml. But unfortunately it does not work for me. So I tried with the following code snippet to disable the cm:description field.

 var lookupObject = Alfresco.util.ComponentManager.find({name : "Alfresco.FormUI"});
 var me = lookupObject[0];
        var tinyInstance = Dom.get(me.parentId+'_prop_cm_description_ifr');
        var tinyToolBar = Dom.get(me.parentId+'_prop_cm_description_toolbargroup');
        tinyInstance.contentDocument.body.contentEditable = false;
        tinyToolBar.hidden = "true";

Dynamic List Constraints in Alfresco

In Alfresco Share, how do I populate the drop down values from a database. This is something possible using dynamic constraint. So here I go.

To achieve this you need to extend the "ListOfValuesConstraint" class which present in org.alfresco.repo.dictionary.constraint.ListOfValuesConstraint package.

Step-1 (Extend the class):

package org.alfresco.diary.constraint;

import java.io.Serializable;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import org.alfresco.repo.dictionary.constraint.ListOfValuesConstraint;
import javax.faces.model.SelectItem;
import org.apache.log4j.Logger;


public class CustomConstraint extends ListOfValuesConstraint implements Serializable {

   private final Logger logger = Logger.getLogger(CustomConstraint.class);
   private static final long serialVersionUID=1;

   @Override
    public void setAllowedValues(List allowedValues) {
    }

    @Override
    public void setCaseSensitive(boolean caseSensitive) {
    }

   public void initialize() {
       super.setCaseSensitive(false);
       this.getDataFromDb();
    }

    protected void getDataFromDb() {

String driverName = "org.gjt.mm.mysql.Driver";
        String serverName = "localhost:3306";
        String dbName = "alfdiary";
        String userName = "alfdiary";
        String password = "alfdiary";

        List<String> allowedValue = new ArrayList<String>();

        try {
            Connection connection = null;
            Class.forName(driverName);
            String url = "jdbc:mysql://" + serverName +  "/" + dbName;
            connection = DriverManager.getConnection(url, userName, password);
            Statement stmt = connection.createStatement();
            ResultSet rs = stmt.executeQuery("select dropdowns from alfdiary");
            while (rs.next()) {
                allowedValue.add(rs.getString("dropdowns"));
            }
        }
        catch (Exception e) {}
super.setAllowedValues(allowedValue);
   }
}

Step-2 (Create Metadata Model):

Add the following configurations in your meta model.

<constraint name="alfdiary:dropDowns" type="org.alfresco.diary.constraint.CustomConstraint">
<parameter name="allowedValues">
<list></list>
</parameter>
</constraint>

Apply the above constraint to the metadata

Thats it!!!