What is a custom component?
You can extend what's available in the list of components within pages by creating a custom component.
How to create custom component ?
1. Navigate to Admin > Pages > Component click on Add new Component
2. Fill out the form
Component Name: the name of the component that will be displayed
Description: short description what the component does, description will also be searcheable in the component dialog box.
Width Constraints: add how many columns this component can be expanded 1 (minimum) 4 (maximum)
Height Constraints: specify if there are height constraint of the component
HTML : place html code here
CSS: place css code here
The CSS class mentioned while editing a custom component will be automatically added to a parent element that contains this component. This allows you to control styles for the entire component (header bar and any decoration) rather than just the element that is created in the HTML editor. So far we have only used this to turn the background transparent if a component is made of multiple visible parts (news list, fast access buttons, etc)
Bootstrap 3 is used throughout Claromentis and will already be loaded on any Pages page.
Code is run inside a closure once Pages has added the component to the page and the DOM is ready. Two variables are exposed -
- element A jQuery object for the element containing your HTML.
- options An object containing your option fields and values.
jQuery is available as jQuery or $. Requirejs is also available for loading external libraries if needed.
What is Options?
Options allowing value to be parsed within the settings for example "Title" of the component
Here is example implementation
<div class="panel-body"> Hello World</br> You chose <span class="js-choice"></span> </div>
Here is example of finished custom component with Title and Option.
You can download example component here