Design Manual Task in legacy Task Designer mode

note

The recommended method to design any custom Manual Task (MT) type is to use the Task Designer Operation. However, you can also choose any other Operation and proceed the old way to design MTs as described in this article. Any MTs designed previously with an Operation category other than the Task Designer Operation remain executable and compatible with the WorkFusion platform functionality.

The image below describes the general flow of a Manual Task when its design is delivered in the legacy Task Designer mode.

Access task design tools

For designing Manual Tasks, Control Tower (CT) offers the following modes:

• Task Designer: allows you to create and edit a task structure, description, look and feel, and answers without coding. The mode is enabled by default.
• Code editor: gives you extended customization options but requires coding skills.

To access the modes, go to the CT main menu and select Manual Tasks > View All. In the Manual Task list on the left, click the name of the task where you want to add a specific design and go to the Design tab.

Alternatively, use the Manual Task creation flow: select Manual Tasks > Create or click Create Manual Task > select an Operation, and go to the Design tab. For details, read the Create Manual Task article.

The screenshot below displays the Task Designer mode. The main panel on the left side comprises a WYSIWYG editor, and the side panel on the right is reserved for adding and configuring a relevant task section.

The Task Designer layout above can vary significantly, depending on the selected Operation. Possible variations are as follows:

• Section order changed
• Sections missing
• New sections added
• Styles changed

Create Manual Task layout in Task Designer mode

To create a Manual Task design in the Task Designer mode, configure the Task Designer sections as described in the table below and use the WYSIWYG editor where needed.

Section	Main panel actions	Side panel actions	Common or per Record*
Title	Type Rich Text.	Help text, no actions required.	Common
Instructions	Type Rich Text, show and hide Instructions.	Add or edit, delete, re-order Instructions.	Common
Question	Type Rich Text, type Data Elements in the following format: ${question.data['element name']} or delete them.	Insert Data Elements.	Text—common; Data Elements—per Record
Answer	No actions required.	Add or edit, delete, and re-order Answers and Sub Answers.	Answer Types—common; Answers—per Record

* The last column indicates whether the section content is common for all records in a Manual Task or unique for each Record.

tip

When designing a Manual Task, do not copy and paste a formatted text directly from MS Word or other advanced text editors. These insertions can significantly increase the task size and slow down its loading. If you want to copy and paste a text, use simple text editors (NotePad++, Sublime Text) and format it in Work.AI.

Edit Manual Task design

To edit a Manual Task design, follow the instructions below:

1. Click any space inside a target section—Title, Instructions, Question, or Answer.
2. On the main or the side panel, perform any required action in accordance with the table above.
3. To check the updated task design, click the Preview button.
4. Save the updated design if needed.

Use WYSIWYG editor

Use the WYSIWYG editor (TinyMCE) to format texts and insert links, images, tables, and lists into the Instructions or Question sections.

For a detailed description of the WYSIWYG editor, refer to the PDF guide.

Insert images

To insert an image, follow the steps below:

1. Set the cursor where you want the image to be displayed.

2. Click the Insert/edit image button.

   

3. In the displayed window, specify the image location.

   

   The following options are available:

   • Paste a link to your image into the Image URL field, for example, https://yourserver.domain/images/your_image.jpeg.
   • If your input file contains a column with image URLs, enter an appropriate data element into the Image URL field, for example, ${question.data['img_url']}.
   • To upload an image file from your local PC, click the icon to the right of the Image URL field. Click Choose File > Upload and select an image from the gallery.

4. After uploading an image or entering the image URL, go to the Appearance tab to edit its formatting if needed.

Switch to Code Editor mode

By default, the WYSIWYG editor is set to the Task Designer mode enabling you to format all aspects of your Questions, including links and images, without coding. Switching to the Code Editor mode allows you to edit the underlying source code (Javascript, HTML, CSS, and FreeMarker) used to render the Manual Task information.

For details on working in the Code Editor mode, read Design Manual Task via Code Editor.

Preview design

Once input data is uploaded to your task, you can preview how it appears to workers in WorkSpace. For that, in the top right corner of the Task Designer page, click the Preview button. See a task preview example below:

To switch from one preview to another if there is more than one, use the side arrow buttons or bottom navigation controls.  

Save Manual Task design

Note that a task is not created until it is saved for the first time. When you finish designing a task, click the Save button.

tip

While designing a new task, it is advisable to click Save after each new element is added. Mind that tasks are NOT saved automatically.

Once you finish designing a Manual Task and save it, proceed to set the run parameters. For that, in the bottom right corner of the Task Designer, click the Next button or navigate to the Run tab.

Save Manual Task as Operation

To make a designed Manual Task reusable, create an Operation from it by clicking the Save as Operation button.

For detailed information about Operations, refer to the Create and Manage Operations article.