Create a component | Acquia Cohesion Docs (2024)

You can create components using the component builder. Components can include a settings form to allow for editable content, styles and other settings.

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

1. Navigate to Site Studio> Components >Components
2. Click+Add component

   
   

3. On the next screen within, within the Details area, enter a name in theTitle field
4. Select a category in the Category field. Thisdetermines where the Component is displayed on the Sidebar browser
5. Check the Enable inline editing checkbox to allow the components content to be edited directly on the website.
6. Within the Availability section, leave itset to All. For more information, seeRestricting where a component can be used.

   

   See Also

   Acquia CMS — Acquia Docs

Step 2 - Create the component layout

1. Click onthe + plus buttonon the Layout canvasto open the Sidebar browser
2. Drag aParagraph elementonto the Layout canvas.

   

Step 3- Create the component form

1. Click onthe + pluson the Component form builder to open the Sidebar browser
2. You will see that the Elements within the Sidebar browser are Form elements. If not, selectFieldsin the menu at the top of the sidebar
3. Drag aPlain text areafield element onto the Component form builder
4. The field will show [machine name not set].

   
   

5. Double click on the Field in the component form builder to open its settings
6. At the top of the field settings, you will see a field with'Plain text area' within it.This is the default label for the field. You can change this to something more meaningful. For this example, change it to 'Paragraph text'
7. When you change the label for the first time, the Machine name field below will update. You can update the machine name in the future by clicking the Edit icon on the right of the field.
8. Click Apply at the bottom of the settings form

   
   

9. You will now see that the Field on the Component form builder displays a machine name as a token. This is what you will use to link the field to your component elements.

   

Step 4 - Link the component form to the component layout

1. Double click the Paragraph element on the Layout canvas to open its settings
2. Click on the + iconto switch all fields into variable mode. This allows you to enter tokens into the fields
3. Enter[field.paragraph-text] (this is the machine name of your plain text area field)in the Paragraph text field. Ensure you use square brackets around the token.
4. Click on the + icon to toggle out of variable mode
5. All fields should turn back to their original state except for the Paragraph text field
6. ClickApply

   

Step 5- Preview your form and save your component

1. Preview your component form in the Component form previewarea
2. ClickSave and continue to save your new Component

   

Step 6- Add your component to a page

1. Navigate to and edit a page which has the Layout canvas
2. Click on the +plus button to open the Sidebar browser
3. Click on the Components tab
4. Drag your new Component onto the Layout canvas
5. Double click on the Component to edit its settings
6. Add some text to the Plain text area
7. Preview your page to see your Component applied.