When modifying instruments or fields, you may find it useful to reference, copy, or modify the field source code. Source code can be found in the Rich Text Editor. It is the underlying html that is formatting the field label or rich text in the way you've specified.
Jump to:
Accessing Source Code
You can access source code in any Rich Text Editor. To access the source code of a field, first navigate to the Designer.
Open the field editor.
To access the source code, you will need to enable the Rich Text Editor. Select the checkbox above the Field Label text box which says "Use the Rich Text Editor" in green text.
In the Rich Text Editor, look for the "<>" symbol, pictured below.
This is a very simple example of source code text. The text is in the default font size, weight, and family. The only specification that needs to be made in the source code is <p></p>, which defines a paragraph.
Here is a list of some common tags you might see in REDCap source code.
| HTML tags |
Function |
| <p></p> |
Defines a paragraph |
| <br> | Defines a line break within a paragraph |
| <em></em> | Formats the text as italic |
| <span x = "y: z"; ></span> | Inline container for styling |
| <li></li> | Formats a list |
| <ul></ul> | When used with the list tag, creates a bulleted list |
| <ol></ol> | When used with the list tag, creates a numbered list |
|
<table> <tbody> <tr> <td></td> </tr> </tbody> </table> |
Represents table elements. <tr></tr> represents a row while <td></td> represents a column. This code would be a single row, single cell. |
Keep in mind that HTML impacts accessibility. Use the html tag that corresponds to the purpose.
If you are new to learning about REDCap source code, create a test project to experiment and have some fun with it! Create some interesting formatting with the point and click Rich Text Editor, and then open the source code to see what tags are making it happen.
Use Cases for Source Code
When you already have access to the point and click Rich Text Editor, why would you need to open or modify source code?
You may want to copy the entire source code or a portion of the source code if you would like to implement the same formatting in another existing field. To do this, you can simply open the source code of another field, locate where the source code should be located in reference to any existing code, then paste.
If you are using the Multi-Language Management Tool, you can also use the source code from the original field to set up your translated field to possess the same formatting. Read more about the Multi-Language Management Tool (MLM) - Basic System Settings.
You may want to edit the source code if you are trying to accomplish formatting that the point and click editor may not allow.
For example, the Rich Text Editor only offers a limited font size dropdown.
However, in source code, you can specify another font size that might be more suitable to your formatting needs. Here is an example of font modification in source code:
<p><span style="font-size: 17pt;">Testing text</span></p>
With knowledge about how to access and replace source code, you can begin to utilize new tools in your surveys. For example, Aidan Wilson from INTERSECT created the following wizard to help research teams create a static progress bar in HTML: REDCap Progress Bar Wizard v1.0