Input Types

Similarly to custom fields, input types can also store information or perform some functionality actions within different applications. The main difference is that input types are generally used closely with layouts while constructing components. For example a component might be structured from a number of layouts and input types that are used as functionality settings within the component, such as “Section Style”, “Text Alignment”, “Font Size”, “Show/Hide Header” etc. 

To create a new input type click on the “Add Input Type” positioned at the top of the admin page:

Configure the new input type:

• Name: define the input type name that will be shown in the input type listing page

• Category: define the type of the input type. Depending on the selection additional configuration settings might be introduced
  
  

Example: Text > Select

Once saved the new input type will be listed in the Input Types listing area. Use the search to quickly find it (new input types are added a the end of the list, therefore to manually find it use the pagination at the bottom of the list and navigate to the last page available)

Now that the input type has been created, we can assign it to a layout or component of our choosing, for this example let's use the “Two Column” component and add the new input type as an attribute. 

Navigate to Content > Common > Layouts > Search for “Two Columns” & Edit the layout:

To add the new input type to the “Two Column” layout, create a new area by clicking the “Add layout area” button displayed in the Layout Areas section. 

The new area will be added to the bottom of the area list:

Configure the area with more information:

• Name: determine the name of the area (mandatory and required for integration purposes). Once defined and integrated, do not change it as it might break the integration - instead use the “Label” field to rename the input type. 

• Label: determine how the area will be shown within the component (user facing name - it can be anything)

• Type: search all the existing input types and select the one for this layout, in this case “Documentation” input type

• Help & Info: use these fields to add more information about the input type, how it is used etc. 

Once the above area has been configured click save, this will update the area and more configuration fields will be available:

Enable “Attributes” toggle to make the documentation field as attribute within the layout. It is also possible to make the input type “required” ie. mandatory, and even determine the default value for the select field (eg. option1 in this case):

Now that the input type has been configured and added to a layout, the same will be now available within the “Two Column” component across all pages on the website as an additional component setting. 

Navigate to Content > Pages > Edit Page > Add or Expand the Two Columns component on the page:

The same input type can be listed as a simple input type just like the other “Section Style” or “Right Width” input types on the image above. In order to do so simply disable the “Attributes” setting within the Layout > Area section. Once disabled the same input type will display as per below:

The position of the input type within the component is determined by the position of the area within the layout. To change the position of the input type navigate back to the Layout and drag and drop the documentation area into new position, eg. 4th after “Left Width” area: