Claromentis comes with numerous Page components ready for use:
However, it's possible for your team to create their own components.
Components can be created by those with appropriate knowledge to write in HTML or JavaScript.
We have some free examples of custom page components for you to import and try - Snowfall, Quotes
If your team lacks the skills to create your component, we can develop it for you.
Raise a change request ticket detailing your requirements, and our designated team will discuss this further with you.
Where can the components be created?
1. An application administrator of the Paged application can navigate to Admin > Pages > Component and click on the 'Add new component' button
2. Fill out the form to configure your component
Component Name: the name of the component that will be shown on the front end when users are choosing it.
Description: A short description of what the component does. This will also be searchable in the component list.
Width Constraints: Add how many columns this component can be expanded across, 1 (minimum), 4 (maximum)
Height Constraints: Specify if there are height constraints for the component
HTML: Place HTML code here
It is recommended not to use ID attributes because we don't know how many times this component might be added to a page. Using element.find('.<class-name>'); from JavaScript to target elements works as a way around this.
At Claromentis, we add a js- prefix to this class name, which lets our designers know that these are not CSS classes.
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.
Bootstrap 3 is used throughout Claromentis and will already be loaded on any Pages page.
JS: place JavaScript code here
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 are Options?
Options allow a value to be parsed within the components settings, for example the "Title" of the component, a select field or a date field for the user to configure.
3. Once your component has been saved, it will appear in the components list on the front end of Pages.
This means users who can edit pages can begin to use it, placing it on Intranet pages and changing the options that are available to display different data.
Example
You can download this example component to test it on your own site here:
Use the import option in Admin > Pages > Components to add this to your site and look at how it's been set up.
How this appears on the front end:
Its configuration:
HTML:
<div class="panel-body"> Hello World</br> You chose <span class="js-choice"></span> </div>
JS:
element.find('.js-choice').text(options.option_1);
