Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Creating aps-richtext-stencil-sample (ADF 1.5.0 example)

This project is part of the Alfresco Application Developer Framework collection of examples. For further details about the repository and all the available examples please check the introduction.

About this project

This project implements an Alfresco ADF application, starting process instances and viewing open tasks. Very specifically this example shows how to implement the a rich text editor component mentioned in this blog in an ADF application. The implementation is using TinyMCE library.

By its nature, the application interacts with Alfresco Process Services as BPM System.


Before running the application, please check the assumptions listed below.

  • Alfresco Process Services v1.6.0+ running on localhost on port 9999. You can check here for further details on how to install and setup Alfresco Activiti as Alfresco ADF Service Layer. If you have Alfresco Process Services running on a port other than 9999, don't worry, there is a settings option using which you can change the url before logging into the web application.

  • Node.js JavaScript runtime version 6.9+. Together with its package ecosystem named npm.

Running the application

Once the prerequisites will be checked, follow the tasks below to run the application.

  • Open a terminal and change the directory to be in the aps-richtext-stencil-sample folder.

  • Install dependencies executing the command below. The execution of this command will require some time to be completed. If some warnings will appear into the terminal, don't worry.

npm install
  • As explaied here, TinyMCE will not work without a skin. So let's copy the skins directory to the public folder using the following command.
cp -r node_modules/tinymce/skins public
  • Compile and run the application executing the command below. The command compiles and starts the project in watch mode. Upon start, you can navigate to http://localhost:3000 with your preferred browser. The browser will automatically reload upon changes to the source code.
npm start
  • Log into the application using your Alfresco Process Services credentials and you should see any open tasks via "My Tasks" component. You should now also be able to start any processes that you have access via "Start New Process" tab/link in the ADF application.

  • Let's now test the richtext editor component. In order to do that that please import the Process Application into your Alfresco Process Services and publish the application using the Alfresco Process Services UI. This step will deploy a process where the richtext editor component is utilized in a task form using the "stencil" feature in Alfresco Process Services. Run the newly deployed process via this ADF app which will render those stencil components correctly.


Below some screenshots of the application as an example.

Login page

My Tasks

Task Form With RichText Editor Field

Start Process

Feedback, issues or support

For feedback, issues or simply to request support, check the introduction introduction for further details.


All the content available in this tutorial has been developed and tested using Alfresco ADF v1.5.0 LA release, NodeJs 8.0.0 on a MacOS. Each variation to the listed versions and tools could affect the success of the execution, even if the involved technologies and tasks have been defined to be as more general as possible, not related to any specific context or platform.


Copyright (C) 2017 Alfresco Software Limited

Alfresco Software Limited licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

You can’t perform that action at this time.