Use the Code Editor to build custom jobs with HTML, CSS, Javascript, and Appen's handy custom markup language, CML.
To switch from the Graphical Editor to the Code Editor, click on the "Switch to Code Editor" link below the Instructional Editor.
Important Note: You will not be able to switch back to the Graphical Editor once you have saved any custom code in the Code Editor. Legacy jobs with custom code that is not readable by the Graphical Editor can also only be edited in the Code Editor.
Code Editor Interface
Once you switch you will see the CML field appear, under the Title field, as in the screenshot below.
- 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 & Insert Data
- On the right-hand side of the page is the ‘CML Reference’ list. Click on one of these to insert an example form element into the CML wherever the cursor is at.
- Above 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.
CSS/JS Field
- Under the CML field, there is a ‘Show Custom CSS/JS’ link, click here to access the CSS and JS fields. These fields will allow further custom styling. See, for example articles here.
- After clicking on "Show Custom CSS/JS" the following two fields will appear for CSS and JavaScript respectively.
Figure 6: CSS/Javascript Fields
Important Javascript Notes:
-
Custom JavaScript is not enabled by default. To get this feature enabled, please reach out to your Customer Success Manager.
- Use JavaScript (JS) at your own discretion. In most circumstances, JS that is used for smaller cosmetic customization (look and feel) will not break Server Side Validation (SSV). However SSV may fail if your custom JS deletes fields or transforms field values. It is recommended to thoroughly test any Job using JS.
- 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.