Flex Component

The Flex Component is a brand-new way to build customer facing User Interface components for Miva. It provides a library of admin UI components such as input, select, image pickers, etc. that developers can use to build reusable components for Miva without having to write a module and primarily working within Javascript.

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:

  1. Properties
  2. JavaScript
  3. CSS
  4. Initialization Template
  5. Instance Template

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.

JavaScript - The JS associated with the Component to make any functionality work properly.

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.

Web Components

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:

  1. Leverages modern Web Technologies with broad Browser Support
  2. Native Encapsulation (Multiple versions of the same component can be used on the same page without conflict of HTML, CSS, JS between each other)
  3. Primary development language is JavaScript

Properties

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.

The values selected/input by the customer for each property will be made available as variables to your instance of the flex component to be able to use to control the HTML, CSS or JavaScript. For example if you have a color picker component to set the background color of a part of the component, that value will be available as a variable in the JavaScript and Template Code which you can then use to set a CSS value for the background color.



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
Color Picker color
Date Picker date
Date/Time Picker datetime
Image Selector image
Product Lookup product
Category Lookup category
Link link
Icon Selector
(using the MivaIconMap in admin/ui.js)
icon
Text Editor texteditor
Slider slider
Distributed Slider distributor_slider
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

flex.json Property Definitions

  1. code - The flex component code
  2. name - The flex component name
  3. Version - The flex version number
  4. category - must be one of the following: image, image-slider, image-across, featured-product, product-carousel, category-carousel, text-utility, text-banner, image-text, video
  5. resourcegroup_code - This is the Miva resource group the CSS/JS will get output from.
  6. initialization_template - Path to the initialization template. This is a .mvt text file that can contain Miva template logic.
  7. instance_template - Path to the instance template. This is a .mvt text file that can contain Miva template logic.
  8. properties - Array of JSON objects for the properties the component will provide in admin for the end user
  9. advanced_properties - Array of JSON objects for the properties that will appear in the advanced tab
  10. defaults - Object containing the default values for all properies


This file would live in the root folder that contains a src folder. Inside src would be:

  1. css
  2. js
  3. templates

There can be more than one CSS file as well as more than one JS file.

Example CSS, JS and Templates

Property Definitions & Examples

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

Property Type Definitions

Textbox - text



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.

Note

The textsettings object can also be used inside the default object to set the default values

Full Example:

text settings

Example of the textsettings in the Page Builder User Interface

Text Area (textarea)

Text Areas are able to leverage the same textsettings object defined above.

Text Area Example

Radio Buttons (radio)

Radio Button Example:

Select List (select)

Example

Color Picker (color)

Color Picker Example

Looking for Developer Docs?

We have a whole section for that, including: Developer Training Series, Template Language docs, Module Development tutorials and much, much more.

Head to the Developer Section

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept

Copyright © 1997 – 2021 Miva©, Miva Merchant©, MivaPay©, MivaCon© Miva, Inc. All Rights Reserved.