Skip navigation
All Places > Alfresco Premier Services > Authors fmalagrino

Alfresco Premier Services

4 Posts authored by: fmalagrino Employee
fmalagrino

WCMQS Part II

Posted by fmalagrino Employee Aug 20, 2018

Welcome to WCMQS Part II! If you didn't read part I so far, please do so for some more background information.

 

WCMQS is based on Spring Surf and not Aikau as few people thought.

 

What does it mean that it is based on Spring Surf?

 

Spring Surf needs for rendering a new page a page.xml and page.ftl a template.xml and template.ftl and a webscript(s).

 

When you install WCMQS the alfresco data dictionary is extended by a new content model names ws:webSiteModel

the model is designed to be as generic as possible

The model have new types :

  • ws:website type
  • ws:section type
  • ws:webroot type
  • ws:webassetCollectionFolder type
  • ws:webassetCollection type
  • ws:indexPage type
  • ws:article type
  • ws:image type
  • ws:visitorFeedback type
  • ws:visitorFeedbackSummary type
  • ws: publishqueueentry type
  • ws:webasset aspect

 

Let's see what are these new types in details:

 

The ws:website type:

Is derived from the cm:folder type and represent a website.

This type has properties that apply to an entire website, such as host name, port and context of the web application that delivers the website.

If you read part I, you should understand yet where we modified these properties, in the Quick Start data in Alfresco Share. The folder at Documents/Alfresco Quick Start/Quick Start Editorial / Live is of this type. You can see the Host name. port and context in the folder's metadata.

 

 

Click "Edit Properties":

 

The ws:section type:

Is as well derived from the cm:folder type and represents a section of a website. 

The website is modeled as a tree of sections. 

A section defines an element in the website navigation and can contain child sections and web assets, such as the section's landing page, articles, collections of articles and images.

In the Web Quick Start data in Alfresco Share, in the Documents/Alfresco Quick Start/ Quick Start Editorial/root/blog  folder is of this type.

 

The ws:webroot type:

Is derived from the ws:section type and represents the root of a website's tree of sections.

This type extends the section type so therefore a web a webroot folder *is* also a section.

In the Web Quick Start data in Alfresco Share, in the Documents/Alfresco Quick Start/ Quick Start Editorial/root  folder is of this type.

 

 

Edit Properties:

 

The ws:webassetCollectionFolder type:

Is derived from the cm:folder type and is used to hold asset collections.

Each section folder has a webassetCollectionFolder below it named 'collections' in which all of that section's asset collections are placed.

In the Web Quick Start data in Alfresco Share, in the Documents/Alfresco Quick Start/ Quick Start Editorial/root/blog/collections folder is of this type.

 

The ws:webassetCollection type:

Is derived from the cm:folder type and represents an asset collection.

In the Web Quick Start data in Alfresco Share, in the Documents/Alfresco Quick Start/ Quick Start Editorial/root/blog/collections/latest.articles folder is of this type.

 

 

Edit Properties:

 

The ws:indexPage type:

is derived from the cm:content type and represents an index page of a section (also know as the section's landing page).

In the Web Quick Start data in Alfresco Share, in the Documents/Alfresco Quick Start/ Quick Start Editorial/root/blog/index.html asset is of this type.

 

 

More --> Edit Properties: --> all properties :

The ws:article type:

Is derived from the cm:content type and represents any piece of text-based content such as a news article or a blog post.

The article type defines few associations that allow an article to be linked with related articles and a couple of images.

In the Web Quick Start data in Alfresco Share, in the Documents/Alfresco Quick Start/ Quick Start Editorial/root/blog/blog1.html file is of this type.

 

 

More -->Edit properties --> All Properties:

 

The ws:image type:

Is derived from the cm:content type and is used for general image assets.

In the Web Quick Start data in Alfresco Share, in the Documents/Alfresco Quick Start/ Quick Start Editorial/root/publications/Alfresco-Office.jpg file is of this type.

 

 

 

The ws:visitorFeedback type:

Is derived from the dt:dataListItem type and represents feedback that has been submitted by visitors to a website.

The Intention is to be sufficiently generic to be useful for a number of different types of feedback including comments, reviews, ratings, and questions.

Each website has a Share data list created for it into which items of visitor feedback are placed.

When first Installed, Quick Start does not have any visitor feedback.

Submitting a comment to a blog post or a 'contact us' request from the website will create a node of this type in the repository

To add a datalist to your website you need to customize the site and drag and drop the datalist to current site pages.

 

 

 

After you clicked "OK" you should see a new option in the Menu called Data Lists,

 

 

If you use a blog or contact us

 

 

The ws:visitorFeedbackSummary type:

Is derived from the cm:object type and is used to record summary information about visitor feedback received for a given asset such as the number of comments received and the average rating was given.

 

The ws:publishqueueenty type:

Is derived from the cm:object type and is used to record nodes that have been queued up for publishing.

 

In share there are two workflow.

  • Review and Publish Section Structure 
  • Review and Publish

The first enable the review  and publish the structure of a section of the website. To publish particular section, initialize a workflow on that section's index.html. It will publish that section folder collection folder and as well subsections folders.

 

The second instead enables you to review and publish web content. Too publish the content you start the Review and Publish workflow.

 

The ws:webasset type:

Is derived from the cm:titled aspect and is used to mark any piece of content that is addressable through a website.

Among other things, a web asset (a node with the ws:webasset aspect) has two multi-valued NodeRef properties (ws:parentSection and ws:ancestorSections) that contain the identifier(s) of the section(s) in which  the asset is placed and its ancestor sections.

When an asset is created in, moved to, or removed from a section, these properties are updated to reflect the asset's new location.

This is done to make certain kinds of common queries very fast.

 

Other useful  properties :

Order index:

To configure the order in which navigation looks display. 

Lowest value of order index appeared to the right of the Home link and the remaining links are added in ascending numerical order.

NB : this is a mandatory aspect used on the folder called ws:ordered

 

 

Exclude From Navigation :

It allows you to show or hide that section from the menu.

Hi everybody,

 

To make a label bold or with a different color in APS you need to create a new class and add the new CSS property inside it.

 

The Process in my example will have only one human task with four check-boxes.

 

 

From the four check-boxes in the example two check-boxes should be bold and two normal but with blue as the color.

 

Let's create first the four check-boxes :

 

After this click the tab style and create a Classname

 

After you create the Classname you can create the style.

 

In the Style section let's create two classes: One to be bold and one to have the rest of the checkboxes blue but not bold.

 

Now that you have created this the next step is to add the class in the fields that we need.

 

In my example, test and test 3 will be bold and test2 and test4 blue.

 

Edit your first checkbox, click style and add the class to make it bold (this is the class from the style definition).

 

 

 

Now let's do the same for the second checkbox and let's make it blue and not bold.

 

 

Now edit the third and fourth checkbox similar to number one and two to apply the style on the check-boxes.

 

Now it's time to run the app and test the configuration. If all was done correctly you should have as result two check-boxes bold and two check-boxes blue as shown in the next screenshot:

 

 

NB: This work only on Activiti-app at the moment Workspace doesn't read any inline CSS or JS if you want use Workspace you'll need to create a custom control to do validation or hook into an event for that specific component or treat it as a custom stencil

 

If you want to download the app is available here.

fmalagrino

WCMQS Part I

Posted by fmalagrino Employee Apr 28, 2017

What is WCMQS ?

Alfresco Web Quick Start is a set of website design templates and sample architecture, built on the Alfresco Share content management and collaboration framework.

With Quick Start, developers can rapidly build customized and dynamic web applications with powerful content management features for the business users without having to start from scratch.

Using standard development tools developers can quickly deploy the comprehensive content management capabilities of Alfresco to build new and innovative web applications. Developed using the Spring framework with Alfresco Surf, the Web Quick Start allows developers to easily extend Alfresco to add new features to support the demands of the business.

Why is good to know WCMQS ?

  • WCMQS is a powerful component for creating a website
  • You can customize your website as you wish
  • You can create web scripts in JavaScript or Java
  • You can use any JavaScript frameworks like AngularJS, ExpressJS etc, and libraries like jquery and also any responsive frameworks like Bootstrap foundation etc

 

How do you Install WCMQS ?

 

There are two ways to install WCMQS in your alfresco application:

1) If you use the installer you need tick the checkbox Web Quick Start 

2) if you are installing manually Alfresco using the war then you need only to add the war WCMQS to your alfresco application.

 

For checking that WCMQS have been installed correctly on your Alfresco application you can create a collaboration site:

 

 

 

After you have created your collaboration site it is time to add the web quick start dashlet.

 

Below, the screen captures will explain how to add a dashlet on Alfresco.

 

 

Choose "Add Dashlet"

 

 

Drag the "Web Quick Start" into one of the columns

 

The added dashlet will grant you access to two prototype websites: 

Finance (single language)

Government (multilanguage)

 

In my example I select Finance.

 

After you select one of the two prototypes it will create an example website inside the document library.

 

 

Configuring WCMQS :

 

After the installation it is time to configure WCMQS.

 

By default, WCMQS create two folders: One for editorial and one for live content:

 

Editorial and Live folder must have two different host as properties configured. By default the Editorial has the host "localhost" while live is be default configured to "127.0.0.1". Both are configured on port 8080 with the context name "wcmqs"

 

 

 

 

 

If you have a different port and you want a different name you need click the Editorial or Live and modify the properties.

 

In my example, the port is 8888 (because my alfresco run in port 8888) and my website will be called test.

 

 

Same configuration for live (apart from the host name):

 

 

#Once you decided how the site is called you need go under tomcat/webapps/ copy the WCMQS.war and rename to the name of your site.war. Alfresco will create your new site. Restart tomcat and now is time to test your site going to your "host":"port"/"context" of the site in my case will be localhost:8888/test/

 

 

If you have done all correctly you should see the following site :

 

If you need to create a custom property files and you want to use this custom property file in  Process Services you can do it using a Java Delegate or a Spring bean.

 

In my case, I used a Java Delegate.

 

First of all, create your custom property file and upload it to the following folder:

 

/alfresco/process-services-1.6.0/tomcat/webapps/activiti-app/WEB-INF/classes/

 

Now it is time to create a java delegate: But first of all it is important to understand what is the command to load the file properties:

 

It is just one line of code and it's the following line:

InputStream inputStream = this.getClass().getClassLoader().getResourceAsStream("generic.properties");

With this code of line, you tell the java delegate which property file to load.

After you loaded it you can start to save your properties inside the property file and they will be used in Process Services.

String host = "";

String username = "";

String password = "";

Properties properties = new Properties();

properties.load(inputStream);

host = properties.getProperty("generic.host");

username   = properties.getProperty("generic.username");

password = properties.getProperty("generic.password");

execution.setVariable("host", host);

execution.setVariable("username", username);

execution.setVariable("password", password);

Let's explain a bit the code

 

So first as the best practice, we create some string and we set the value to empty. Otherwise you can have a null pointer exception.

 

After that, we load inside the Properties object our custom file property

 

Then we start to set our string with the value of the property that is set inside our file property.

 

In our example, generic.host will have some value inside the property file.

 

After we have assigned our string with all the value that we need from the property file we can set them as a variable 

 

execution.setVariable("host", host);

 

So this piece of code means that you have inside your process a variable called host and you are assigning this variable to the string value of the host entry inside the property file (generic.host)

 

After you finish the code it is time to export it as a jar and add the jar inside the following path:

 

/alfresco/process-services-1.6.0/tomcat/webapps/activiti-app/WEB-INF/lib/

 

To apply your new java delegate you need to create a service task and apply under the class field  the name of your class. Below are few screenshots how to do this:

 

1. A very simple example workflow

the process

 

 

2. Configure the global variable:

 

3. The variables set in step 2.

 

 

4. Setup the java delegate (adding the class name to the "class" field:

 

 

I created 2 forms for testing that my Java delegate is loaded correctly.

 

If the host variable will be empty the process should go one way and if it is correct it should go to the form that will display text with all our information of the file properties 

 

How to configure this:

 

1. Create the condition on one arrow :

 

Condition on arrow

 

2. Enter the condition (host: not empty) that will allow to the form success:

 

 

3. And the second condition:

 

 

 

If the host is not empty the process should go to the human task with the following form:

 

 

The reference form here is "success" and this is how it looks like:

 

 

Otherwise, if there is some problem from the java delegate it will go to the other form called "wrong":

 

 

 

For testing you can use the following snippets:

 

Java code:

package my.Test;

import java.io.InputStream;
import java.util.Properties;

import org.activiti.engine.delegate.DelegateExecution;
import org.activiti.engine.delegate.JavaDelegate;


public class GenericCustomProperties implements JavaDelegate {
String host = "";
String username = "";
String password = "";

   



    public void execute(DelegateExecution execution) throws Exception {
         InputStream inputStream = this.getClass().getClassLoader()
         .getResourceAsStream("generic.properties");
          Properties properties = new Properties();
          properties.load(inputStream);
          host = properties.getProperty("generic.host");
          username   = properties.getProperty("generic.username");
          password = properties.getProperty("generic.password");
          execution.setVariable("host", host);
          execution.setVariable("username", username);
          execution.setVariable("password", password);

         

    }


}

Please be sure to create a java project with a package called my.Test create containing a class called

GenericCustomProperties.java

 

Now that you created this java class export it as jar and upload at the following path: /alfresco/process-services/tomcat/webapps/activiti-app/WEB-INF/lib/

 

As custom properties, you can create a file called generic.properties, open it and write the following snippet:

generic.host=127.0.0.1:8080
generic.username=username
generic.password=password

 

The file needs be located inside the following path:

 

/alfresco/process-services-1.6.0/tomcat/webapps/activiti-app/WEB-INF/classes/