Create an editable component
Components can include editable content, styles and other settings by creating a custom editing form for the Component. When an editable Component is used on a page, all data entered into the editable fields is stored with the page as content. A Component can be used multiple times on the same page or different pages and have different content for each instance where it is used.
Creating a simple editable component
The following steps are an example to demonstrate how to create a very simple component with an editable field. To make a more complex Component, the same steps are used but with a more advanced layout and more form fields.
Step 1 - Create a new component
- Navigate to DX8 > Components > Components
- Click +Add component
- On the next screen within, within the Details area, enter a name in the Title field
- Select a category in the Category field. This simply determines where the Component is displayed on the Sidebar browser
- If you require the Component to be editable inline using the Quick edit feature, check the Show quick edit checkbox
- Leave the Available on entity type set to All. For more information, see Restricting where a component can be used.
Step 2 - Create the component layout
- Click on the + plus button on the Layout canvas to open the Sidebar browser
- Drag a Paragraph element onto the Layout canvas.
Step 3 - Create the component form
- Click on the + plus on the Component form builder to open the Sidebar browser
- You will see that the Elements within the Sidebar browser are Form elements. If not, click on the Fields tab at the top
- Drag a Plain text area field element onto the Component form builder
- You will see [Field 1] has been added next to the field name.
Step 4 - Link the component form to the component layout
- Double click the Paragraph element on the Layout canvas to open its settings
- Click on the ...ellipsis menu and click Toggle variable mode
- Enter [Field 1] in the Paragraph text field. Ensure you use square brackets and there's a single space between the Field and 1.
- Click on the ...ellipsis menu and click Toggle variable mode
- All fields should turn back to their original state except for the Paragraph text field
- Click Apply
Step 5 - Preview your form and save your component
- Preview your component form in the Component form preview area
- Click Save and continue to save your new Component
Step 6 - Add your component to a page
- Navigate to and edit a page which has the Layout canvas
- Click on the +plus button to open the Sidebar browser
- Click on the Components tab
- Drag your new Component onto the Layout canvas
- Double click on the Component to edit its settings
- Add some text to the Plain text area
- Preview your page to see your Component applied.