Cohesion In A Nutshell For Beginners

April 23, 2020 | 8 Minute Read

Tags: Cohesion , Drupal , Drupal 8

Introduction to Cohesion

Getting Started

Cohesion DX8 is a low-code Drupal website builder, available via a software-as-a-service (SaaS) model. It provides a visual user interface (UI) for building and maintaining Drupal websites. 

With Cohesion, users are able to create page layout templates, content entity templates, views templates and other aspects of their website theme using a simple drag-and-drop user interface. Cohesion makes it possible to create and design websites in Drupal without writing code in PHP, HTML or CSS. Cohesion empowers designers and marketers who are not Drupal experts to quickly create beautiful new sites.

What Can You Build Using Cohesion?

Cohesion provides a great Drupal 8 website development and editing experience, allowing users to build most of the theming/front-end components of a Drupal website. 

Here’s what you can create using Cohesion:

1. View templates 2. Menu templates 3. Master templates 4. Full page content templates
5. View mode templates 6. Page content layout 7. Content components 8. CSS styles


Configuration Settings in Cohesion

Here are the steps to configure Cohesion on a Drupal website:

  1. Manage account settings: Valid account credentials and API keys are required for account settings in Cohesion. Individual API keys are provided to the team members working on the project. Separate API keys are used to maintain different environments/instances. For Google Maps to be configured on the website, users should have a Google account and Google Maps API keys with valid credentials.
     
    Cohesion 1
  2. System settings configuration: Users can set the system configuration settings by clicking on the Configuration tab > System Settings option. Image browser for config, content, animation on view and scroll settings, etc, are configured globally in the System Settings tab.
     
    Cohesion 2
Cohesion 2a
  1. Element settings: Cohesion > Configuration > Element Settings tab will display the list of all the Cohesion elements on the page. Admin users should be able to set the permission for Cohesion elements as per user roles (like anonymous, authenticated, approver, editor, etc). Clicking the “Save Permission” button will save the changes successfully.
     
    Cohesion 3
  2. Google Maps API key: To use Google Maps on a website, you need to have a Google account and the Google Maps API key with valid credentials. Just add the Google Map API key and click the “Save” button.
     
    Cohesion 4

What Makes Cohesion Different From Drupal 8?

Here’s what makes Cohesion different from Drupal 8:

  1. Automation testing: In Drupal, we use Behat extensively to write acceptance test scripts as there are ready-to-use step definitions available to write acceptance tests. Behat can also be used to write test scripts for Cohesion websites, but testers would need to create a custom framework, as ready-to-use steps for Cohesion are not available as of now. Also, Cypress is a good tool to write automated tests for Cohesion websites.
     
  2. Better usability: According to user testing, using Cohesion, site builders and content editors with basic coding skills can create Drupal websites up to 4X faster. Creating sites in Drupal 8 requires coding skills and takes more time as well.

    Take, for example, a custom Card component.

    In Drupal, we’ll have to create a block type/paragraph type, and have a specific Twig file for the markup. Now, based on the markup and design, we need to write CSS rules to create a Card component.

    In Cohesion, to build a Card component, we can have the template of the card along with the CSS properties within the DX8 tool. Using its drag-and-drop feature, we can use predefined elements like image, text, and link and create a layout for the card. Components have a “Properties” tab, where we can control the look of the component. All this is done without writing a single line of code.
    screenshot of backend
  3. Back-end and front-end testing: In spite of having back-end and front-end in a single place for Cohesion components, we first need to verify if the functionality is met, and then we need to test the look and feel of the component.

    In the above example of the Card component, we first have to test if a user can add required attributes like the heading, image, link, and any other settings. Then we need to move to the front-end to verify if the component is rendered as per the design guidelines.
    screenshot of backend
  4. Easy to use layouts and templates: UI issues in Drupal Layout Builder are addressed by Cohesion’s Layout Canvas tool. Cohesion provides components (mini-block “templates”) that you can quickly drag, drop, arrange and nest to create immersive page layout templates based on design patterns that you define.
     
    Cohesion 6a
  5. Responsive layouts: Cohesion allows you to take full advantage of all CSS properties and selectors, and lets you preview responsive layouts in various device aspect ratios such as laptop, phone, or tablet.
     
    Cohesion 7
     
    Cohesion 8
    Desktop breakpoints
     
    Cohesion 9
    Device breakpoints
     
    Cohesion 10
    Mobile breakpoints
     
  6. Reusability of components: Cohesion components can be reused across multiple websites, whereas in Drupal 8, custom blocks are created at the site-level only.
     
  7. Cohesion duplicate function: Cohesion has a duplicate function that allows users to add the same component multiple times in a page layout template. On the other hand, in Drupal 8, we need to create a new custom block each time by filling up all the fields and saving it. This becomes a tedious task when multiple components’ functionality needs to be tested.
     
    Cohesion 11
    Cohesion 12
  8. Component-based design system: Using Cohesion, we’re able to develop and manage designs at the component level within Drupal. This reduces the effort required from the design team to break the design components into smaller parts. After completion, all the smaller components can be combined to make them more attractive and easy to use when placing them on a single page. The snapshot below is an example in which a helper is created which has a default content layout for page content type. Site builders can reuse the helper as many times as needed to display the page in the same format. Site builders can also create a new layout by adding the appropriate components.
     
    Cohesion 13
  9. Granular access control: Cohesion allows granular access control—different access levels to Cohesion elements can be set for different user roles.

    For example, admin users can permit User A to edit any existing helpers/components, which can be placed on the Layout Canvas while creating content, while withholding access to create any new helpers/components on the site. User B can have permission to create new helpers/components using the DX8 tab. They may not have permission to create/update other aspects like configuration, developer tools, website settings, styles, etc.

Below are some aspects which it is not possible to implement using Cohesion as of now:

  1. Forms: It’s not possible to create layouts for “Forms” using Cohesion.
     
  2. Complex interactivity of JavaScript frameworks: Creation of interactivity is only possible using predefined interactive elements like tabs, accordions, sliders, and on-click interactions. Complex interactive experiences that rely on JavaScript frameworks are not possible without additional development. 
     
  3. Web applications: Conditional fields logic cannot be implemented in Cohesion. Since Cohesion doesn’t support conditional fields, every component is broken down into multiple components based on the condition.
     
  4. Cardinality: Cohesion components don’t have cardinality in place, so users will need to duplicate the existing component or create a new component of the same type.
     
  5. Embedded views: Views cannot be embedded into Cohesion components. A custom component will be created to support views embedding.
     
  6. Bundle type selection: This is not available while using an entity reference element. For example, referring nodes of a particular type is not possible at this time.
     
  7. API outage: It’s been observed that developers often face API outages whenever there is an API update, causing failure of package import and creation of components on the site. This can sometimes become a blocker for the team. The API status can be checked at http://status.cohesiondx.com.
     
  8. Import issue: The Cohesion documentation states that components exported from a newer Cohesion version cannot be imported to an older Cohesion version
     
  9. Responsive image styles: Cohesion doesn’t support a responsive image style module. It allows the user to define image styles based on the breakpoint widths. Each breakpoint width can have its own settings. By default, the responsive grid is set to desktop first.
     
  10. Hierarchical structure in the select list for taxonomy terms: In Cohesion, the taxonomy terms for the select list will appear as is without maintaining the hierarchy of parent-child relationships in the dropdown. This can be really confusing for users if there are duplicate child terms in the vocabulary.

    In Drupal 8, the taxonomy terms maintain proper parent-child relation hierarchy when placed in the select list form element. It is easy for users to select any particular taxonomy child term by seeing the hierarchy structure in the dropdown.
     
  11. Conditional logic: Cohesion doesn’t support conditional fields. Every component is broken down into multiple components based on the condition. In Drupal 8, this is applied to form elements by default, and easily achievable for custom blocks.

Elements Section In Cohesion

Here are the steps to test and use default elements in Cohesion:

  1. Access the site as an admin user.
  2. Navigate to the admin/content page.
  3. Create a basic/landing page content type.
  4. Click on the + icon on the Layout Canvas section.
  5. On the left side, you can see sections such as Elements, Components, Component content, Helpers, etc.
     
    Cohesion 14
  6. Clicking any of these sections will display a list of Elements, Components, Component content, Helpers, etc, added to the Drupal site.
     
  7. Clicking the Elements tab will display all the default elements provided by Cohesion, like:
     
    1. Content elements: Content Elements include WYSIWYG, heading, paragraph, link, blockquote, inline element, list container, list item, etc. Users will be able to drag and drop any element on the page in the Layout Canvas and create static pages.
       
      Cohesion 15
    2. Layout elements: Layout elements include container, row for columns, columns and iFrame. They are used for maintaining the page-layout section.
       
      Cohesion 16
    3. Media elements: Media elements include image, picture, video, video background, Youtube video embed, Youtube video background, etc. These elements are used for adding media elements on the website pages.
       
      Cohesion 17
    4. Interactive elements: Interactive elements include button, slider container, slide, accordion tabs container, accordion tabs item, Google Maps, Google Maps Marker, read more, modal, etc.
       
      Cohesion 18
    5. Drupal core elements: Drupal core elements include block, menu, breadcrumb, entity reference, and entity browser.
       
      Cohesion 19
    6. Custom elements: All custom elements created will be displayed under custom elements.

Learning Materials

More information related to Cohesion can be found here: