How to Create Custom Components Using Component IO

My Introduction to Component IO article described how you could use pre-built components on any site regardless of the Content Management System, languages, or technologies used. The benefits include:

  • hundreds of ready-made, attractive and configurable components to choose from including content blocks, galleries, navigation bars, social media widgets, forms and more
  • component code can be installed with a simple cut and paste
  • the same components can be used across other pages and sites will updated instantly
  • it’s easy for non-technical editors to make changes in a WYSIWYG editor and check it with a live preview
  • all users can share Component IO dashboard links and collaborate on the same items
  • Component IO is fast and delivers items quickly with a single API call, regardless of the number embedded in the page
  • you can switch CMS or build processes at any point and retain components
  • a full help guide and real-time chat assistance is available
  • a free trial account can be used to test the service with your system.

Component IO Custom Components

Despite the huge range available, Component IO permits developers to create and edit their own components. In this tutorial, I will illustrate how to create a simple custom bar chart component which can be displayed and configured on any site:

Component Development Concepts

Component IO uses the Vue.js component model. Those with experience with the framework will immediately recognize the concepts and syntax. That said, I’m no Vue.js expert — but a little HTML, CSS and JavaScript knowledge is enough to build a complex component.

All components are encapsulated; their styles and code cannot ‘leak’ to other parts of the page. For example, the bar chart component’s title is an H2 element and we can apply any styles, e.g.

h2 {
  font-family: comic-sans;
  font-size: 8em;
  color: #f00;
}

Vue.js will ensure those (awful!) styles are only applied to our component and not H2 headings elsewhere on the page. However, a style applied to all H2 titles on the page can cascade to our component title. This can be useful since our component can inherit default fonts, colors and dimensions.

Step 1: Create a Blank Component

Log in to component.io, and then click Blank component on the Project page:

create a new component

From the Edit menu, choose Edit component name and enter “barchart” or another suitable name.

edit menu

Step 2: Define Fields

Fields are used to configure a component. They allow:

  1. Content editors to modify values.
  2. Other components to be created with a different configuration. For example, if we require two bar charts, we can duplicate the first and change the field values accordingly.

From the Edit menu, choose Add / remove fields and enter the fields you require:

add and remove fields

For this control, I defined:

  1. A single title text field.
  2. The barvalue numeric field which defines the bar’s value.
  3. The barlabel text field which defines the bar’s label.
  4. The barcolor color field which defines the bar’s color.

These last three items had the repeat checkbox checked. We can therefore define any number of data items in our bar chart.

Step 3: Set the Initial Data

Hit the Edit menu to open the Content and Code control. Remaining in the Content section, I entered values for the title and three data items:

set field data

Step 4: Define the Component Code

Hit the Code toggle to open the code editor. This is where the component’s HTML, CSS and JavaScript is defined:

code editor

The component HTML documentation describes how templates are created. There is no need for an outer DIV or other element because the component will be automatically given one.

The title field is added first:

Alternatively, we could use:

{{ title }}

The chart bars will be contained in a

Powered by WPeMatico