Customising The Create Content Wizard

[resplin]

Obsolete Pages{{Obsolete}}

The official documentation is at: http://docs.alfresco.com

Web Client Customization

Table of Contents

• 1 Introduction


• 2 Overriding the wizard definition


• 3 New Strings


• 4 New configuration


• 5 JSF configuration


• 6 New JSP


• 7 Custom Wizard Bean


• 8 Packaging and deploying

Introduction

This example shows how you can add an extra step into the Create Content wizard. The new third step of the wizard will allow the user to select an aspect to apply to the new content. The list of aspects will be driven from some new configuration, thus showing how easy it is to add your own custom configuration. This example is also included as the CustomWizard sample in the SDK.

Overriding the wizard definition

To redefine a wizard we have to copy the existing definition and replace it with the custom definition (combining config is not supported for wizards).

Copy the createContent definition from web-client-config-wizards.xml and paste it into your web-client-config-custom.xml file.

Change the title-id attribute of the wizard, add a new step to allow the user to select an aspect and change the name of the managed bean to be used by the new wizard. After making these changes your web-client-config-custom.xml should look like the following.

   <config>
      <wizards>
         <wizard name='createContent' managed-bean='CustomCreateContentWizard'
                 title-id='custom_create_content_wizard_title' 
                 description-id='create_content_desc'
                 icon='/images/icons/new_content_large.gif'>
            <step name='details' title-id='details' description-id='create_content_step1_desc'>
               <page path='/jsp/content/create-content-wizard/details.jsp' 
                     title-id='create_content_step1_title'
                     description-id='create_content_step1_desc'
                     instruction-id='default_instruction' />
            </step>
            <step name='content' title-id='enter_content' description-id='create_content_step2_desc'>
               <condition if='#{CreateContentWizard.mimeType == 'text/html'}'>
                  <page path='/jsp/content/create-content-wizard/create-html.jsp'
                        title-id='create_content_step2_title'
                        description-id='create_content_step2_desc'
                        instruction-id='default_instruction' />
               </condition>
               <page path='/jsp/content/create-content-wizard/create-text.jsp'
                     title-id='create_content_step2_title'
                     description-id='create_content_step2_desc'
                     instruction-id='default_instruction' />
            </step>
            <step name='aspect' title-id='select_aspect' description-id='create_content_step3_desc'>
               <page path='/jsp/extension/add-aspect.jsp' 
                     title-id='create_content_step3_title'
                     description-id='create_content_step3_desc'
                     instruction-id='default_instruction' />
            </step>
            <step name='summary' title-id='summary' description-id='summary_step_description'>
               <page path='/jsp/wizard/summary.jsp'
                     title-id='summary'
                     description-id='summary_desc'
                     instruction-id='content_finish_instruction' />
            </step>
         </wizard>
      </wizards>
   </config>

New Strings

We defined a few new strings in the wizard definition, namely the new wizard title and the text for the new step. All these new strings should be added to your custom webclient.properties file as follows.

custom_create_content_wizard_title=Custom Create Content Wizard
select_aspect=Select Aspect

create_content_step3_title=Step Three - Select Aspect
create_content_step3_desc=Select the aspect to apply to the content.

New configuration

The list of aspects to be shown in the new step 3 of the wizard will be driven from some new configuration. To augment the configuration used for the Content Wizards you can add any XML you like to the 'Content Wizards' section and then refer to it in your custom bean implementation.

To specify the list of aspects to show add the following to web-client-config-custom.xml.

   <config evaluator='string-compare' condition='Content Wizards'>
      <aspects>
         <aspect name='dublincore'/>
         <aspect name='effectivity'/>
      </aspects>
   </config>

JSF configuration

In the new wizard definition we changed the managed bean name to CustomCreateContentWizard. We therefore need to register this new bean with JSF. Create a faces-config.xml file and add the following configuration to it.

   <managed-bean>
      <managed-bean-name>CustomCreateContentWizard</managed-bean-name>
      <managed-bean-class>org.alfresco.sample.CustomCreateContentWizard</managed-bean-class>
      <managed-bean-scope>session</managed-bean-scope>
      <managed-property>
         <property-name>nodeService</property-name>
         <value>#{NodeService}</value>
      </managed-property>
      <managed-property>
         <property-name>fileFolderService</property-name>
         <value>#{FileFolderService}</value>
      </managed-property>
      <managed-property>
         <property-name>searchService</property-name>
         <value>#{SearchService}</value>
      </managed-property>
      <managed-property>
         <property-name>navigator</property-name>
         <value>#{NavigationBean}</value>
      </managed-property>
      <managed-property>
         <property-name>browseBean</property-name>
         <value>#{BrowseBean}</value>
      </managed-property>
      <managed-property>
         <property-name>contentService</property-name>
         <value>#{ContentService}</value>
      </managed-property>
      <managed-property>
         <property-name>dictionaryService</property-name>
         <value>#{DictionaryService}</value>
      </managed-property>
   </managed-bean>

New JSP

The new step requires a JSP page to allow the user to select from the list of aspects we defined in the configuration.

Create a file called add-aspect.jsp in the jsp/extension folder (as defined in the wizard definition above) and copy the following code into it.

<h:outputText value='#{msg.aspect}: ' />
<h:selectOneMenu value='#{WizardManager.bean.aspect}'>
   <f:selectItems value='#{WizardManager.bean.aspects}' />
</h:selectOneMenu>

Custom Wizard Bean

The final step is to provide the custom bean implementation for the wizard. We can extend the existing CreateContentWizard and add the aspect selected by the user.

The bean needs to do 3 things:

1. Remember the selected aspect
   
2. Provide the list of selectable aspects
   
3. Add the aspect to the newly created content
   

Create a class called CustomCreateContentWizard in the org.alfresco.sample package. Add a member variable to hold the selected aspect and implement the getter and setter method for it.

Add a getAspects() method that returns the list of aspects in web-client-config-custom.xml.

As required in the Dialog And Wizard Framework you must override the finishImpl() method to perform the processing required for the dialog or wizard. In our case we need to call the super class version of finishImpl() and then add the selected aspect to the content.

The key part of CustomCreateContentWizard.java is shown below.

public class CustomCreateContentWizard extends CreateContentWizard
{
   protected List<SelectItem> aspects;
   protected String aspect;
   
   // ------------------------------------------------------------------------------
   // Wizard implementation
   
   @Override
   protected String finishImpl(FacesContext context, String outcome) throws Exception
   {
      super.finishImpl(context, outcome);
      
      // add the selected aspect (the properties page after the wizard
      // will allow us to set the properties)
      QName aspectToAdd = Repository.resolveToQName(this.aspect);
      this.nodeService.addAspect(this.createdNode, aspectToAdd, null);
      
      return outcome;
   }
   
   // ------------------------------------------------------------------------------
   // Bean Getters and Setters

   public String getAspect()
   {
      return aspect;
   }

   public void setAspect(String aspect)
   {
      this.aspect = aspect;
   }
   
   public List<SelectItem> getAspects()
   {
      if (this.aspects == null)
      {
         ConfigService svc = Application.getConfigService(FacesContext.getCurrentInstance());
         Config wizardCfg = svc.getConfig('Content Wizards');
         if (wizardCfg != null)
         {
            ConfigElement aspectsCfg = wizardCfg.getConfigElement('aspects');
            if (aspectsCfg != null)
            {
               FacesContext context = FacesContext.getCurrentInstance();
               this.aspects = new ArrayList<SelectItem>();
               for (ConfigElement child : aspectsCfg.getChildren())
               {
                  QName idQName = Repository.resolveToQName(child.getAttribute('name'));

                  // try and get the display label from config
                  String label = Utils.getDisplayLabel(context, child);

                  // if there wasn't a client based label try and get it from the dictionary
                  if (label == null)
                  {
                     AspectDefinition aspectDef = this.dictionaryService.getAspect(idQName);
                     if (aspectDef != null)
                     {
                        label = aspectDef.getTitle();
                     }
                     else
                     {
                        label = idQName.getLocalName();
                     }
                  }
                  
                  this.aspects.add(new SelectItem(idQName.toString(), label));
               }
               
               // make sure the list is sorted by the label
               QuickSort sorter = new QuickSort(this.aspects, 'label', 
                                                true, IDataContainer.SORT_CASEINSENSITIVE);
               sorter.sort();
            }  
         }
      }
      
      return this.aspects;
   }
}

Packaging and deploying

Refer to the Packaging And Deploying Extensions guide for instructions on packaging and deploying your extension.

Alternatively, you can download the SDK from sourceforge or get the latest code from SVN where you'll find a prepared CustomWizard sample.

Once deployed the create content wizard should look like the screenshot below.

Custom-wizard.gif