Create and Edit Components

Creating a component is a three-step process. First, build a form that asks for content from the page editor. Second, add the source code that will format the content on your website page. Third, launch the component. Only Level 10 users can create and launch components.

To create a new component:

1. Navigate to Content > Components.
2. Click +New.
3. In the "Name" box, enter a name for your component.
4. Click Create.

You are now viewing the elements that will create a form for your new component.

Form ElementsLink to this section

Create and edit form elements, as follows:

1. In the elements toolbar, click a basic, advanced, or structural element.
   • To use individual elements multiple times, first add Structural Elements > Element Group. Then add elements to the group.
     • Basic Elements
     • Advanced Elements
     • Structural Elements

     Short Text: Creates a one-line text field for content.

     Long Text: Creates a multi-line text field for content.

     Email: Creates a field for text that automatically requires a valid email address.

     Checkboxes: Provides a list of choices from which multiple options can be selected.

     Radio Buttons: Provides a list of choices from which one option can be selected.

     Dropdown: Provides a dropdown list from which one option can be selected.

     Multi-Select: Provides a list of choices from which multiple options can be selected using Ctrl+Click.

     Date/Time: Provides a date- and/or time-picker.

     Source Editor: Provides a source code editor to enter code into.

     WYSIWYG Editor: Provides a mini-WYSIWYG editor to enter and format text in.

     File Chooser: Editors can select a path to a file or page. An external link can also be pasted in.

     Image Chooser: Editors can select an image.

     Asset Chooser: Editors can select an asset (plain text, web content, or source code only).

     Tag Chooser: Provides a field to type tags into.

     Element Group: Add a group to use individual elements multiple times. Then add elements to the group.

     Instructional Text: Write instructions to the editors filling out the component. This element isn't displayed on the page and exists only within the component form.

2. In the "New" box, enter information in the form elements fields, as follows:
   
   • Element Settings*
   • Advanced*

   Label (required): Provide a name for the element indicating its function (for example, image, email address, description, etc.).

   Helper Text: Provide instructions to the editor who is filling out the component.

   Placeholder Text: Provide example text in the field.

   Required Field: Determine whether filling out the element is required.

   Minimum Length: Determine the minimum number of characters an editor must provide.

   Maximum Length: Determine the maximum number of characters an editor can provide.

   Items: +Add preset answers as separate items (for checkboxes, radio buttons, dropdowns, and multi-select).
   To reorder items, drag the arrows. To pre-select an item in the form, select the radio button. To delete an item, click "x."

   Format: Choose between "Date and Time," "Date Only," and "Time Only."

   Mini-WYSIWYG: Provide general instructions to the editor who is filling out the component.

   Minimum Repeat: For the element group, determine the minimum number of times the editor who is filling out the component must add the group to the component instance on the page.

   Maximum Repeat: For the element group, determine the maximum number of times the editor who is filling out the component can add the group to the component instance on the page. 
   If a user repeats a WYSIWYG editor element more than 5 times, this may slow Modern Campus CMS performance.

   For the "Advanced" tab to be available, the element must have a defined label. Additionally, any element that requires items (such as radio buttons or drop-down) must have at least one item. Source and mini-WYSIWYG elements don't have an "Advanced" tab.

   Display Name/Value: For elements with items (such as radio buttons or drop-down), pair the name of the item that the page editor sees with the value that is inserted into the component code when that item is selected.

   Validate with Regular Expression: For text-based elements, choose whether text entered into the field will be validated by regex. If "Yes" is selected, set the regex and error message.

   Rows: For the Long Text element, set the number of rows for the text field.

   Default Date: For the Date/Time element, set the default date that will be entered.

   Default Time: For the Date/Time element, set the default time that will be entered.

   Starting Location: For the File and Image Chooser elements, define the folder where the file chooser will open in.

   Available File Types: For the File and Image Chooser elements, define a file type to limit the user choices by entering its extension (for example png, jpg). If this field is used, any file types not specified will be excluded. For the Asset Chooser element, select the type of asset from the dropdown menu.

   Locked to Path?: For the File and Image Chooser elements, select whether users choosing a file will be able to navigate above the current folder or not.

   Default Server for Files: For the File and Image Chooser elements, select whether the file chooser will look in the staging or production server by default.

   Available Assets by Tag: For the Asset Chooser element, restrict the assets available to users by adding one or more tags.

   Fixed Tags: For the Tag Chooser, set fixed tags that will be applied no matter what.

   Filtered Tags: For the Tag Chooser, set tags or a collection from which users will be able to apply tags.

   *Availability based on element type
3. Click Save.

Next, create the source code to display the form content.

Source CodeLink to this section

Create and edit source code, as follows:

1. Click "Source" tab.
2. In the source toolbar, select a radio button to "Display preview in the WYSIWYG."
   • If "Yes," the component preview is rendered on the page. This is intended for HTML-only components.
   • If "No," the component displays as a blue placeholder.
3. In the source editor, write the HTML code to structure the component.
   • A component must be valid XML to prevent transformation errors on pages it is placed on.
   • Additional CSS in your site design files may be required.
   • The source code for a component must be no longer than 262,144 characters (over 100KB).
4. Drag form elements, including an element group, from the source toolbar to the source editor.
   
   • Adding an element multiple times does not allow for unique content, rather it duplicates the element content in each location. Instead, create and add an element group.
     

     

5. To format elements in a group, click the group source code pill in the editor.
6. In the "Source Controller" box, write code for each element in the group.
   
7. Click Insert.
8. Edit the settings for the component in the "Properties" tab.
   • Add a "layouts" tag to make the component available for use in page layouts.
9. Click Save.
10. Click Launch to make the component available for use on pages.