The alfresco solution for BPM is built on the alfresco process service Engine, as you are surely aware. Alfresco process service enables process designers to develop forms, or user interfaces for user tasks, to simplify the interaction between business processes and human actors. APS has several present UI features, such as text input and process variable content.

The reason you should opt to make a custom stencil is simple: the included stencils are insufficient for your purposes, and you would need something more tailored.

Creating a Custom Stencil into Alfresco Process Services

To reach the administration dashboard, click the Kickstart app content from the APS welcome page.  Here, you can create and manage all AP models and definitions.

Fig: Alfresco Process Service Engine (APS)

 

The item stencil is located in the top menu. To access the stencils view, click on it. Press the “stencil” button in the top right corner to show up the form seen in the illustration below.

Fig: APS App designer

Creating stencil in APS

After completing the form, click the “make new stencil” button to be taken to a page with all the included stencils. The stencil set, known as “Type Ahead Multi Select” is displayed on the website and is available for editing and customization. Press the stencil editor button in the top right corner to begin customizing the stencil set. After pressing the button, select Add New Item in the top right corner. After that, you’ll arrive at a page similar to the one below.

Fig: The Stencil design in APS

Having created a new custom stencil, start filling in the fields as described below.

Fill (Type Ahead Multi Select) in name.
Fill the from runtime template with:

[you HTML, CSS, JS ] code.

Example: <div> My First Stencil App</div>

Fill the form editor template with:

<i> label of new stencil app </i>

All the other fields are optional. Go at the top left and save the stencil.

Creating a from using the custom stencil

Now that the new stencil set is created (with our custom stencil included) let’s create a very simple from using new stencil, the task is very simple. Consider we already completed this task in a previous example.

Fig: APS Froms

To create the from, let’s click on the forms item in the top menu of the aps page. Once you will be in the forms page, click on the create form button on the top right. To complete the task, fill in the from and click on the create new form button, as shown below. The stencils field has be pointed to the (Type Ahead Multi Select) set.

Fig: Create New Form Fields

Once the from is created as empty, it’s time to design it, simply including the My form field. To add the custom stencil to the form, drag the my first stencil item from the left panel and drag it into the right one, now that the from is completed, the whole from should looks like the picture below. Save the from, pressing the disk icon on the top left and your from is created.

Fig: Design From APS

 

Updating the user task in the process model

After the form is created, we must change the user task in the process model to refer to the new from. Let’s select the process option from the APS page’s top menu and then click on the visual editor button to go right to the (myProcess). Once the editor has been displayed, click on the user task and then click once more on the item in the bottom panel that is referenced from. Design of (myProcess) with emphasis on references from item to point on My form.

Fig: APS Process

Once the referenced from item is selected, a model window shows you the available from. Select My from and press save button. Now the from is referred from the user task and we can save again the process model, pressing the disk icon on the top left.

Publishing again the app

APS has been republished following the modification of the process model to reflect the new form of the user tasks. Click on the applications item in the top menu of the APS page to finish the task. Once you are on the APPS screen, click the lens to alter the myAps option. Click the publish button in the top right corner after you’ve reached the app administration page.

Fig: App Publish

After publishing app, the users or group you assign the process creations will have this app. The landing page of APS contain My process app. You can see it below. While clicking on my process app, a new model will be available that contain, the tasks, process, report and start.

Fig: New Process is created

Fig: My process app

Here is an example of how APS creates a type ahead multi select custom stencil.

Fig: Custom Stencil Label

While creating stencil, I use language like HTML, CSS, and JavaScript. In the field type ahead multi select data comes from the REST API, which is dummy api for testing. You can see in the below figure how the data is present in a field and you can check it using checkbox, while clicking on checkbox you can see the data, which checkbox you have click on.

Fig: Custom Stencil data (1)

Fig: Custom Stencil data (2)

I hope you guys have enjoyed it, feel free to ask question or if you face any issue while creating custom stencil. If you want Custom stencil code you can visit my github link too. If you want to connect with me you can also visit my linkedin profile. You can see more blog at AlfrescoHub