Are you looking for the latest documentation?

Documentation for Acquia Cohesion V6.0 onwards has moved to https://cohesiondocs.acquia.com

    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

    1. Navigate to DX8 > Components > Components
    2. Click +Add component
    3. On the next screen within, within the Details area, enter a name in the Title field
    4. Select a category in the Category field. This simply determines where the Component is displayed on the Sidebar browser
    5. If you require the Component to be editable inline using the Quick edit feature, check the Show quick edit checkbox
    6. Leave the Available on entity type set to All. For more information, see Restricting where a component can be used.

    Create-new-component-v5.gif

    Step 2 - Create the component layout

    1. Click on the + plus button on the Layout canvas to open the Sidebar browser
    2. Drag a Paragraph element onto the Layout canvas.

    Add-element-to-layout-v5.gif

    Step 3 - Create the component form

    1. Click on the + plus on 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, click on the Fields tab at the top
    3. Drag a Plain text area field element onto the Component form builder
    4. You will see [Field 1] has been added next to the field name.

    Add-form-element-to-form-layout-v5.gif

    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 ...ellipsis menu and click Toggle variable mode
    3. Enter [Field 1] in the Paragraph text field. Ensure you use square brackets and there's a single space between the Field and 1.
    4. Click on the ...ellipsis menu and click Toggle variable mode
    5. All fields should turn back to their original state except for the Paragraph text field
    6. Click Apply

    Link-form-to-element-v5.gif

    Step 5 - Preview your form and save your component

    1. Preview your component form in the Component form preview area
    2. Click Save and continue to save your new Component

    Preview-form-v5.gif

    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.

    Use-component-v5.gif

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.