A flex component can be used to create end user website features such as hero images and sliders, text sections, promotional banners and images, embedded video or any number of other UI elements what would make up a website. Each of these components have developer defined properties which allow a non-technical Miva user to customize the content and look of each component using Miva's Page Builder tool.
The Flex Component completely changes how developers build admin user interface for Miva.
The Flex Component is made up of 5 parts:
Properties - These are configurable settings for the component. They are defined by the component developer but have native UI in the Miva Page Builder so that non-technical users can add content and customize each component for their site and use case.
CSS - The CSS associated with the component for any required styling.
Initialization Template - Output once, on component initialization regardless of how many times the component is used on the page.
Instance Template - This is where you would have HTML/Template code that needs to be output for every occurrence (instance) of the component.
The Flex component is a developer tool which enables developers to build reusable UI elements faster all while providing an easy to use customer experience to customize the component for their specific content and site. While its flexible enough to output the HTML/CSS/JS in any format, we have chosen to leverage Web Components (https://developer.mozilla.org/en-US/docs/Web/Web_Components and https://web.dev/custom-elements-v1/ ) as the structure in which to output the code.
We chose Web Components for 3 reasons:
Properties are the settings an end user will change to modify the content for each component. This includes content focused properties such as adding text to a banner, or uploading an image for a hero image on the homepage. But properties are also used to give the end user point and click ways to customize the look and feel of the component. This includes changing the component size, changes to font size, color and style among other things.
There are 20+ core property types that can be used with the Flex Component. These 20+ property types are designed to become the building blocks of Component. By leveraging these existing property types, as a developer, you can quickly build high quality, functional, User Interface elements in Miva with no manual HTML coding required to build each element.
|Property Name||Property Type Code||JSON Example|
|Textbox||text||JSON Example - Textbox|
|Textarea||textarea||JSON Example - Textarea|
|Checkbox||checkbox||JSON Example - Checkbox|
|Radio Button||radio||JSON Example - Radio|
|Select||select||JSON Example - Select|
(using the MivaIconMap in admin/ui.js)
|List of Text Boxes||list_text|
|List of Images||list_image|
|List of Products||list_product|
|Lists of Categories||list_category|
|List of Color Pickers||list_color|
|List of Date Pickers||list_date|
|List of Date/Time Picker||list_datetime|
|Group Multiple Properties Together||group|
Property Validation Conditions
Max Character Count
Min Character Count
flex.json Configuration File
A flex component can be exported to a series of text files. Its gets deployed by compressing the folder as a tar.bz2 file and uploading it to the Miva admin. In the root folder of your component, you'll have a flex.json file which defines the component name, code and version as well as paths to scripts, CSS, initialization/instance templates, and properties.
flex.json: Here is a sample configuration file for flex.json
This file would live in the root folder that contains a src folder. Inside src would be:
There can be more than one CSS file as well as more than one JS file.
Example CSS, JS and Templates
Property definitions are all done in the flex.json configuration file. Each property will have the following required tags (in addition to type specific tags)
Code - This is the unique code to the property
Prompt - This is the text the end customer will see in the Miva admin for this property
Type - One of the types listed above. This defines what HTML element will get output
Both Text Fields and Text Areas have an optional "textsettings" object that can be defined in the property. If included it will output a Settings icon within the text box to enable advanced editing of the Text. This includes Font Size, Font Color and Text Alignment for regular text as well as focus, hover, active state.
The textsettings object can also be used inside the default object to set the default values
Example of the textsettings in the Page Builder User Interface
Text Areas are able to leverage the same textsettings object defined above.
Text Area Example
Radio Button Example:
Color Picker Example