Use the Code Editor to build custom jobs with HTML, CSS, Javascript, and Appen's handy markup language for forms, CML.
*Important Note: Switching back to the Graphical Editor once saving custom code in the Code Editor is disallowed - only the Code Editor can be accessed after opted to customize a job. Legacy jobs with custom code that is not readable by the Graphical Editor will not be able to access that interface either.
Fig. 1: Code Editor
Title
- Enter the title of the job in this field.
CML Field
- Use the CML field to customize what contributors see, how they submit data, and how that data is stored after they complete an assignment. HTML can also be used in this field. For more information on CML, visit the CML Article.
- Tips and Tricks in the Editor: We've implemented the Ace Code Editor into Appen, and have included a few features that will help while creating the job. Take a look at a great list of tips here and a list of keyboard shortcuts for the Ace Code Editor on their Github page here.
CML Reference
- On the right-hand side of the page between the Instructions and CML fields, is the ‘CML Reference’ button. This button can be used to view all CML form elements and insert an example form element into the CML wherever the cursor is at.
Figure 2: CML Reference
Insert Data
- Next to the CML Reference button is the ‘Insert Data’ button. Use this button to quickly see the column headers of the source data and insert liquid variables into the CML.
Figure 3: Insert Data
Instructions
- Enter the instructions for the job in this field. Use the Instructions Template to help write the best instructions possible. The instructions displayed below were created using the Instructions editor.
- Utilize the "Show HTML" section of the Instructions editor to copy and paste HTML code or Markdown.
Figure 4: Instructions Editor
CSS/JS Field
- At the bottom of the CML field, click the ‘Show Custom CSS/JS’ link to access the CSS and JS fields. These fields will allow spaces to add custom styling to the job design.
Figure 5: Show Custom CSS/JS
Figure 6: CSS/Javascript Fields
Important Javascript Notes:
- Custom JavaScript is not a supported feature and thus not enabled by default. To get this feature enabled, please reach out to your Customer Success Manager.
- There is a 65k character limit of JavaScript for any job.
- Please refrain from inserting any custom JavaScript outside of the designated JavaScript section of the Code Editor.
