Flex Component
Flex Component Overview
The Flex Component is a brand-new way to build customer facing User Interface components for Miva, specifically to be used with Miva's Page Builder. 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 allows developers to build 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:
Flex Configuration File (Properties, Defaults, etc)
JavaScript
CSS
Initialization Template
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.
Anatomy of a Flex 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:
Leverages modern Web Technologies with broad Browser Support
Native Encapsulation (Multiple versions of the same component can be used on the same page without conflict of HTML, CSS, JS between each other)
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 two types of properties. Regular properties and advanced properties. They have the same functionality, but advanced properties will show in the "Advanced" tab in the Miva admin. This gives developers a way to hide non-critical properties and give priorty to others.
There are 18 core property types that can be used with the Flex Component. These 18+ property types are designed to become the building blocks of a 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.
There are also native validation rules you can apply to different properties such as data value types (email, phone number, etc) or min/max character counts.
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.
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.
{
"code": "hello_world",
"name": "Hello World",
"version": "1.0.0",
"resourcegroup_code": "flex_helloworld",
"initialization_template": "src/templates/init.mvt",
"instance_template": "src/templates/instance.mvt",
"scripts":
[
{
"filepath": "src/js/helloworld.js",
"resource_code": "flex_helloworld",
"attributes":
[
{
"name": "type",
"value": "module"
}
]
}
],
"styles":
[
{
"filepath": "src/css/helloworld.css",
"resource_code": "flex_helloworld",
"attributes":
[
{
"name": "type",
"value": "text/css"
},
{
"name": "media",
"value": "all"
},
{
"name": "rel",
"value": "stylesheet"
}
]
}
],
"properties":
[
{
"code": "text",
"prompt": "Display Text",
"type": "text",
"default":
{
"value": "Hello World"
}
}
]
}
flex.json Property Definitions
code (required) - The flex component code
name (required) - The flex component name
Version (required) - The flex version number
category (optional) - must be one of the following: image, image-slider, image-across, featured-product, product-carousel, category-carousel, text-utility, text-banner, image-text, video, text-editor. This is used to categorize the component in Page Builder.
resourcegroup_code (required) - This is the Miva resource group the CSS/JS will get output from.
initialization_template - Path to the initialization template. This is a .mvt text file that can contain Miva template logic.
images (optional) - This allows you to include images in your component that will get added to the server/store upon import.
instance_template (optional) - Path to the instance template. This is a .mvt text file that can contain Miva template logic.
properties (optional) - Array of JSON objects for the properties the component will provide in admin for the end user
advanced_properties (optional) - Array of JSON objects for the properties that will appear in the advanced tab
defaults (optional) - Object containing the default values for all properties
{
{
"code": "hello_world",
"name": "Hello World",
"version": "1.0.0",
"category": "image",
"resourcegroup_code": "flex_helloworld",
"properties": [
{
"code": "checkbox1",
"prompt": "Display Checkbox 1",
"type": "checkbox"
},
{
"code": "checkbox2",
"prompt": "Display Checkbox 2",
"type": "checkbox"
}
],
"advanced_properties": [
{
"code": "select1",
"prompt": "Advanced Select 1",
"type": "select",
"options": [
{
"text": "Option 1",
"value": "option_1"
},
{
"text": "Option 2",
"value": "option_2"
},
{
"text": "Option 3",
"value": "option_3"
}
]
}
],
"defaults": {
"advanced": {
"select1": {
"value": "option_2"
}
},
"checkbox1": {
"value": true
},
"checkbox2": {
"value": false
}
}
}
This file would live in the root folder that contains a src folder. Inside src would be:
css
js
templates
There can be more than one CSS file as well as more than one JS file.
Example CSS, JS and Templates
<hello-world data-text="&mvte:text;"></hello-world>
<mvt:item name="head" param="js:flex_helloworld" />
<template id="hello-world">
<mvt:item name="head" param="css:flex_helloworld" />
<span class="hello-world-text"></span>
</template>
//helloworld.js utilizing Web Components
class HelloWorld extends HTMLElement {
constructor()
{
super();
this.attachShadow( { mode: 'open' } );
}
connectedCallback() {
const template = document.getElementById( 'hello-world' );
this.shadowRoot.appendChild( template.content.cloneNode( true ) );
this.shadowRoot.querySelector('.hello-world-text').textContent = this.getAttribute( 'data-text' );
}
}
customElements.define( 'hello-world', HelloWorld );
/* helloworld.css */
.hello-world-text
{
color: red;
font-size: 32px;
}
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)
"properties":
[
{
"code": "my-custom-property",
"prompt": "Name",
"type": "text"
}
]
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
{
"code": "subheading_text",
"prompt": "Subheading Text",
"type": "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
{
"code": "heading_text",
"prompt": "Heading Text",
"type": "text",
"textsettings": {
"fields": [
{
"code": "size",
"options": [
{
"text": "Small",
"value": "16px"
},
{
"text": "Medium",
"value": "20px"
},
{
"text": "Large",
"value": "24px"
}
],
"prompt": "Font Size",
"pseudoclasses": [
"normal",
"hover",
"focus",
"active"
],
"size": "half",
"style": "font-size",
"type": "selector"
},
{
"code": "color",
"prompt": "Font Color",
"pseudoclasses": [
"normal",
"hover",
"focus",
"active"
],
"size": "half",
"style": "color",
"type": "color"
}
]
}
}
Text Area (textarea)
{
"code": "textarea",
"prompt": "TextArea",
"type": "textarea"
}
Text Areas are able to leverage the same textsettings object defined above.
Text Area Example
{
"code": "textarea",
"prompt": "TextArea With TextSettings",
"type": "textarea",
"textsettings": {
"fields": [
{
"code": "selector1",
"prompt": "Selector (Icons)",
"type": "selector",
"size": "whole",
"style": "font-size",
"options": [
{
"text": "Small",
"value": "16px"
},
{
"text": "Medium",
"value": "20px"
},
{
"text": "Large",
"value": "24px"
}
],
"pseudoclasses": [
"normal",
"hover",
"focus",
"active"
]
}
]
}
}
Checkbox (checkbox)
Checkbox example
{
"code": "checkbox1",
"prompt": "Display Checkbox 1",
"type": "checkbox"
}
Radio Buttons (radio)
Radio button example
{
"code": "radio1",
"prompt": "Display Radio 1",
"type": "radio",
"options": [
{
"text": "Option 1",
"value": "option_1"
},
{
"text": "Option 2",
"value": "option_2"
},
{
"text": "Option 3",
"value": "option_3"
}
]
}
Select List (select)
Example
{
"code": "select1",
"prompt": "Display Select 1",
"type": "select",
"options": [
{
"text": "Option 1",
"value": "option_1"
},
{
"text": "Option 2",
"value": "option_2"
},
{
"text": "Option 3",
"value": "option_3"
}
]
}
Color Picker (color)
Color Picker example
{
"code": "color",
"prompt": "Pick a Color",
"type": "color",
"placeholder": "#000000"
}
Date Picker (date)
Date Picker example
{
"code": "date",
"prompt": "Pick a Date",
"type": "date",
"serverdate": true
}
Note
If serverdate is set to false or omitted, the clientside timezone is used. If the browser timezone is different than server, UTC time is displayed to normalize the date/time.
Date/Time Picker (datetime)
Date & Time Picker example
{
"code": "datetime2",
"prompt": "Pick a Date & Time 2",
"type": "datetime",
"serverdate": true
}
Image Selector (image)
Image Selector example
{
"code": "image",
"prompt": "Select Image",
"type": "image",
"width": "1600",
"height": "580",
"responsive_images": [
{
"code": "mobile",
"prompt": "Mobile",
"width": "344",
"height": "320"
},
{
"code": "tablet",
"prompt": "Tablet",
"width": "720",
"height": "320"
}
]
}
Note
The responsive_images object is optional but recommended. If used and custom images are not uploaded by the client, Miva will generate the proper image sizes which can then output in the picture element so the correct sized image always outputs.
Tablet/Module Responsive Image Generation
While the UI for Page Builder image component supports customers uploading their own custom images for mobile and tablet sized images, not all customers will do so. Miva has a fallback mechanism built into it, where if the tablet/mobile images are not uploaded by the customer, Miva will auto generate them based on the image sizes defined in the responsive images object for each image. This means that you'll always have a mobile and tablet image to use for the tag.
<mvt:if expr="NOT ISNULL l.settings:instance:image">
<picture slot="image">
<mvt:if expr="NOT ISNULL l.settings:instance:image:responsive_images:mobile">
<source media="(max-width: 640px)" srcset="&mvte:instance:image:responsive_images:mobile;">
</mvt:if>
<mvt:if expr="NOT ISNULL l.settings:instance:image:responsive_images:tablet">
<source media="(max-width: 960px)" srcset="&mvte:instance:image:responsive_images:tablet;">
</mvt:if>
<source media="(min-width: 960px)" srcset="&mvte:instance:image:image;">
<img src="&mvte:instance:image:image;" alt="&mvte:instance:image:alt;" loading="&mvte:instance:loading;" fetchpriority="&mvte:fetchpriority;">
</picture>
</mvt:if>
Product Lookup (product)
Product Lookup example
{
"code": "product",
"prompt": "Pick a Product",
"type": "product"
}This will bring up a batch modal to select a product from a list of all products in the store.
Category Lookup (category)
Category Lookup Example
{
"code": "category",
"prompt": "Pick a Category",
"type": "category"
}This will bring up a batch modal to select a category from a list of all categories in the store.
Link (link)
Link Example
{
"code": "link",
"prompt": "Button Link",
"type": "link"
}
Text/Icon Selector(selector)
View a list of available icons here: miva-icon-search
Text Selector Example
{
"code": "alignment1",
"prompt": "Vertical Alignment (Text)",
"type": "selector",
"options": [
{
"text": "Top",
"value": "top"
},
{
"text": "Center",
"value": "center"
},
{
"text": "Bottom",
"value": "bottom"
}
]
}
Icon Selector Example
{
"code": "alignment2",
"prompt": "Vertical Alignment (Icon)",
"type": "selector",
"options": [
{
"text": "align_left",
"type": "icon",
"value": "left"
},
{
"text": "align_center",
"type": "icon",
"value": "center"
},
{
"text": "align_right",
"type": "icon",
"value": "right"
}
]
}Slider (slider)
Slider Example
{
"code": "slider_3",
"prompt": "Slider (0 to 1: Decimal)",
"type": "slider",
"range_low": 0,
"range_high": 1,
"scale": 1,
"precision": 3,
"label": "%"
}Distributed Slider (distributedslider)
Distributed Slider example
{
"code": "distributedslider_3",
"prompt": "Distributed Slider",
"type": "distributedslider",
"breaks": 7
}
Group (group)
Group Example
{
"code": "group1",
"prompt": "Group (Can Disable)",
"type": "group",
"can_disable": true,
"properties": [
]
}List (list)
List properties allow you to create list of other properties that can be added or removed by the end user. An example would be a list of images used for a hero slider. Lists are supported with the following property types:
List of Text Boxes - List Type: text
List of Images - List Type: image
List of Products - List Type: product
Lists of Categories - List Type: category
List of Color Pickers - List Type: color
List of Date Pickers - List Type: date
List of Date/Time Picker - List Type: datetime
List of Links - List Type: link
List of groups - List Type: group
Min/Max Modifiers
All lists also support min_count and max_count to limit how many of a list a user can add or remove. The following example allows a min of 3 and a max of 5
{
"code": "list_min_max_count",
"prompt": "List Min/Max Count",
"type": "list",
"list_type": "text",
"min_count": 3,
"max_count": 5,
"template": {
"value": "Default Value"
}
}
List Text Example
{
"code": "list_text",
"prompt": "List Text",
"type": "list",
"list_type": "text",
"template": {
"value": "Yellow Dog"
}
}List of Images Example
{
"code": "list_image",
"prompt": "List Image",
"type": "list",
"list_type": "image",
"width": "1600px",
"height": "580px",
"responsive_images": [
{
"code": "mobile",
"prompt": "Mobile",
"width": "344px",
"height": "320px"
},
{
"code": "tablet",
"prompt": "Tablet",
"width": "720px",
"height": "320px"
}
],
"template": {
"image": "",
"alt": "Alt Text",
"responsive_images": {
"mobile": "",
"tablet": ""
}
}
}List of Product Example
{
"code": "list_product",
"prompt": "List Product",
"type": "list",
"list_type": "product"
}List of Categories Example
{
"code": "list_category",
"prompt": "List Category",
"type": "list",
"list_type": "category"
}List of Color Pickers Example
{
"code": "list_color",
"prompt": "List Color",
"type": "list",
"list_type": "color"
}List of Date Picker Example
{
"code": "list_date",
"prompt": "List Date",
"type": "list",
"list_type": "date"
}List of Date/Time Picker Example
{
"code": "list_datetime",
"prompt": "List DateTime",
"type": "list",
"list_type": "datetime"
}List of Links Example
{
"code": "list_product",
"prompt": "List Product",
"type": "list",
"list_type": "link"
}List of Groups Example
{
"code": "images",
"prompt": "Images",
"type": "list",
"list_type": "group",
"group_prompt": "Button",
"item_prompt_property": "button_text:value",
"properties": [
{
"code": "button_style",
"prompt": "Button Style",
"type": "select",
"options": [
{
"text": "Primary",
"value": "primary"
},
{
"text": "Secondary",
"value": "secondary"
}
]
},
{
"code": "button_text",
"prompt": "Button Text",
"type": "text",
"required": true
},
{
"code": "button_link",
"default_type": "c",
"prompt": "Button Link",
"type": "link"
}
],
"template": {
"button_style": {
"value": "secondary"
},
"button_text": {
"value": "Shop Later"
},
"button_link": {
"type": "p",
"value": "featured-categories"
}
}
}
Note
Lists of Groups have a "item_prompt_property" property which is used to tell the outer list what property to use for the display (ie, you change this field in the inner group, set the title of the list entry to that value)
Advanced Properties
When a customer is editing the property values of a component from within Page Builder in Miva, there is a default tab which contains all the core properties for that component and then there is an Advanced Tab. The goal of the advanced tab is to be able to hide less commonly used properties or more advanced properties to keep the most important content front and center.
{
"code": "hello_world",
"name": "Hello World",
"version": "1.0.0",
"category": "image",
"resourcegroup_code": "flex_helloworld",
"properties": [
],
"advanced_properties": [
{
"code": "select1",
"prompt": "Advanced Select 1",
"type": "select",
"options": [
{
"text": "Option 1",
"value": "option_1"
},
{
"text": "Option 2",
"value": "option_2"
},
{
"text": "Option 3",
"value": "option_3"
}
]
}
],
"defaults": {
"advanced": {
"select1": {
"value": "option_2"
}
}
}
}
Note
Advanced Properties will be defined under the "advanced_properties" object. To set the default values for Advanced properties there is a "advanced" object inside the "defaults" object.
Component Images
Its possible to package up and include image files in your component. Upon install of the flex component into a store, any images defined will get copied to the destination path specified. The source_filepath is the path of the image in the flex folder locally. The destination_filepath is where you would like the image copied on the Miva server. The default locaiton for images on a Miva store is graphics/store_id/image_name. A common use case for this could be including placeholder images for your component into the flex component file that gets imported.
Note
There is an optional %STORE_ID% placeholder value you can use in the destination path which will get replaced with the actual store id (ex: 00000001) upon import.
"images": [
{
"source_filepath": "src/images/placeholder__1440x580.jpg",
"destination_filepath": "graphics/%STORE_ID%/image1.jpg"
},
{
"source_filepath": "src/images/placeholder__335x240.jpg",
"destination_filepath": "graphics/%STORE_ID%/image2.jpg"
},
{
"source_filepath": "src/images/placeholder__728x320.jpg",
"destination_filepath": "graphics/%STORE_ID%/image3.jpg"
}
]
Default Property Values
When creating properties for your component, its possible to set the default values that show up. This is important so that when someone adds a new component to their page, it comes set with default values as place holders which they can then modify. The default values are defined under the "defaults" object in the flex.json file. Below is an example of default values for most property types.
"defaults": {
"advanced": {
"prop_advanced_text_1": {
"value": "Default Advanecd Value 1"
},
"prop_advanced_text_2": {
"value": "Default Advanecd Value 2"
},
"prop_advanced_text_3": {
"value": "Default Advanecd Value 3"
}
},
"prop_category": {
"category_code": "Default Value"
},
"prop_checkbox": {
"value": 0
},
"prop_color": {
"value": "red"
},
"prop_date": {
"value": 1661870101
},
"prop_date_serverdate": {
"value": {
"day": 13,
"hour": 6,
"minute": 3,
"month": 5,
"second": 22,
"year": 2023
}
},
"prop_datetime": {
"value": 1661870101
},
"prop_datetime_serverdate": {
"value": {
"day": 13,
"hour": 6,
"minute": 3,
"month": 5,
"second": 22,
"year": 2023
}
},
"prop_distributedslider": {
"value": 25
},
"prop_distributedslider_2": {
"value": 75
},
"prop_group": {
"prop_checkbox": {
"value": 1
},
"prop_nested_group": {
"prop_checkbox": {
"value": 1
},
"prop_select": {
"value": "option_2"
},
"prop_text": {
"value": "Default Value"
}
},
"prop_nested_group_collapsed": {
"prop_checkbox": {
"value": 1
},
"prop_select": {
"value": "option_2"
},
"prop_text": {
"value": "Default Value"
}
},
"prop_select": {
"value": "option_2"
},
"prop_text": {
"value": "Default Value"
}
},
"prop_group_disable": {
"prop_checkbox": {
"value": 1
},
"prop_select": {
"value": "option_2"
},
"prop_text": {
"value": "Default Value"
}
},
"prop_image": {
"alt": "Default Alt Text",
"image": "image_a.png",
"responsive_images": {
"mobile": "image_a-mobile.png",
"tablet": "image_a-tablet.png"
}
},
"prop_link": {
"type": "product",
"value": "Default Value"
},
"prop_list_category": {
"children": [
{
"category_code": "Advanced Default Value"
}
]
},
"prop_list_color": {
"children": [
{
"value": "red"
}
]
},
"prop_list_date": {
"children": [
{
"value": 1661870101
}
]
},
"prop_list_datetime": {
"children": [
{
"value": 1661870101
}
]
},
"prop_list_group": {
"children": [
{
"button_link": {
"type": "category",
"value": "featured-products"
},
"button_style": {
"value": "primary"
},
"button_text": {
"value": "Shop Now"
}
},
{
"button_link": {
"type": "category",
"value": "featured-other-products"
},
"button_style": {
"value": "secondary"
},
"button_text": {
"value": "Maybe Shop Now"
}
}
]
},
"prop_list_image": {
"children": [
{
"alt": "Default Alt Text",
"image": "image_a.png",
"responsive_images": {
"mobile": "image_a-mobile.png",
"tablet": "image_a-tablet.png"
}
}
]
},
"prop_list_link": {
"children": [
{
"type": "product",
"value": "Default Value"
}
]
},
"prop_list_product": {
"children": [
{
"product_code": "Advanced Default Value"
}
]
},
"prop_list_text": {
"children": [
{
"value": "Default Value"
}
]
},
"prop_product": {
"product_code": "Default Value"
},
"prop_radio": {
"value": "b"
},
"prop_select": {
"value": "b"
},
"prop_selector": {
"value": "b"
},
"prop_selector_icon": {
"value": "center"
},
"prop_slider": {
"value": 5
},
"prop_slider_decimal": {
"value": "0.35"
},
"prop_text": {
"value": "Default Value"
},
"prop_text_settings": {
"textsettings": {
"fields": {
"active": {
"select": {
"value": 300
},
"text": {
"value": "Default Active Value"
}
},
"focus": {
"select": {
"value": 700
},
"text": {
"value": "Default Focus Value"
}
},
"hover": {
"color": {
"value": "green"
},
"select": {
"value": 400
},
"selector": {
"value": "16px"
},
"text": {
"value": "Default Hover Value"
}
},
"normal": {
"color": {
"value": "red"
},
"select": {
"value": 400
},
"selector": {
"value": "20px"
},
"text": {
"value": "Default Value"
}
}
}
},
"value": "Default Value"
},
"prop_textarea": {
"value": "Default Value"
},
"prop_textarea_settings": {
"textsettings": {
"fields": {
"active": {
"select": {
"value": 300
},
"text": {
"value": "Default Active Value"
}
},
"focus": {
"select": {
"value": 700
},
"text": {
"value": "Default Focus Value"
}
},
"hover": {
"color": {
"value": "green"
},
"select": {
"value": 400
},
"selector": {
"value": "16px"
},
"text": {
"value": "Default Hover Value"
}
},
"normal": {
"color": {
"value": "red"
},
"select": {
"value": 400
},
"selector": {
"value": "20px"
},
"text": {
"value": "Default Value"
}
}
}
},
"value": "Default Value"
}
}
Text Field Validation
All text property type also have the ability to add additional validation on the type of data that can be input into the text field. The following additional field are available:
required - true/false (defaults to false if omited) - NOTE: the required attribute is available on all property types not just text properties
text_type - vaules include: text (default), number, email, url, password, tel
validation_message - (Optional) Message used to display validation errors when validation using validation_pattern (below) fails
validation_pattern - (Optional) Designate a regular expression pattern that can be used to validate the format of the input's value. Possible Values: Regular Expressions, similar to the HTML input-pattern attribute
placeholder - (Optional) Provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that provides a hint as to the expected type of data, rather than an explanation or prompt
label - Optional) Show a suffix/label to the right of the input ideal for displaying the units of an input. For example, a label of "px" could show after an input that collects the margin-top amount
-
min/max/step
Optionally, when a text_type=number, min/max/step can also be defined
min = the minimum number/date allowed
max = the maximum number/date allowed
step = acceptible intervals within the min/max that should be provided
For example a text_type=number, min=0, max=1, & step=0.1 would allow users to enter: 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8 0.9, & 1
minlength/maxlength - when text_type=text, url, tel, email, and password, it defines the minimum/maximum number of characters the user can enter into the field
[
{
"code": "text_nolimits",
"prompt": "Text (No Limitations)",
"type": "text"
},
{
"code": "text_label",
"prompt": "Text (Label)",
"type": "text",
"text_type": "text",
"label": "px"
},
{
"code": "text_placeholder",
"prompt": "Text (Placeholder)",
"type": "text",
"text_type": "text",
"placeholder": "Placeholder Text"
},
{
"code": "text_type_text",
"prompt": "Text (Text)",
"type": "text",
"text_type": "text"
},
{
"code": "text_type_number",
"prompt": "Text (Number)",
"type": "text",
"text_type": "number"
},
{
"code": "text_type_email",
"prompt": "Text (Email)",
"type": "text",
"text_type": "email"
},
{
"code": "text_type_url",
"prompt": "Text (URL)",
"type": "text",
"text_type": "url"
},
{
"code": "text_type_password",
"prompt": "Text (Password)",
"type": "text",
"text_type": "password"
},
{
"code": "text_type_tel",
"prompt": "Text (Tel)",
"type": "text",
"text_type": "tel"
},
{
"code": "text_length",
"prompt": "Text (Min/Max Length)",
"type": "text",
"text_type": "text",
"minlength": 4,
"maxlength": 8
},
{
"code": "text_step",
"prompt": "Text (Step)",
"type": "text",
"text_type": "number",
"step": 4
},
{
"code": "text_min_max",
"prompt": "Text (Min/Max)",
"type": "text",
"text_type": "number",
"min": 4,
"max": 7
},
{
"code": "text_step_min_max",
"prompt": "Text (Step/Min/Max)",
"type": "text",
"text_type": "number",
"step": 2.5,
"min": 3,
"max": 10.5
},
{
"code": "text_step_min_max_2",
"prompt": "Text (Step/Min/Max - Zero)",
"type": "text",
"text_type": "number",
"step": 1,
"min": 0,
"max": 10
},
{
"code": "text_pattern",
"prompt": "Text (Pattern)",
"type": "text",
"text_type": "text",
"validation_pattern": "[a-z]{4,8}",
"validation_message": "Value must be lowercase and 4-8 characters in length"
}
]
Using Property Values in JavaScript & Template Code
All the values of the properties a user has entered via the Miva admin are available in the instance template using the following structure:
l.settings:instanceThe l.settings:instance is a structure containing all the property values of the component. It uses the codes you give to each property. For Example lets say we want to access the value the customer input for the subheading property
&mvte:instance:content:subheading:value;In this example "content" is the group code, and subheading is the property code. Here are some additional examples from the Video component:
l.settings:instance:advanced:controls:autoplay:value
l.settings:instance:advanced:controls:controls:value
l.settings:instance:advanced:controls:height:value
l.settings:instance:advanced:controls:loop:value
l.settings:instance:advanced:controls:muted:value
l.settings:instance:advanced:controls:start:value
l.settings:instance:advanced:controls:width:value
l.settings:instance:advanced:desktop:background_color:color:value
l.settings:instance:advanced:desktop:background_color:settings:enabled
l.settings:instance:advanced:desktop:container_width:value
l.settings:instance:advanced:desktop:overlay_opacity:value
l.settings:instance:advanced:mobile:background_color:color:value
l.settings:instance:advanced:mobile:background_color:settings:enabled
l.settings:instance:content:align:value
l.settings:instance:content:body:textsettings:fields:normal:body_style:value
l.settings:instance:content:body:value
l.settings:instance:content:button:button_link:type
l.settings:instance:content:button:button_link:value
l.settings:instance:content:button:button_text:value
l.settings:instance:content:button:settings:enable
l.settings:instance:content:button:textsettings:fields:normal:button_size:value
l.settings:instance:content:button:textsettings:fields:normal:button_style:value
l.settings:instance:content:button:value
l.settings:instance:content:content_location:value
l.settings:instance:content:heading:textsettings:fields:normal:heading_style:value
l.settings:instance:content:heading:textsettings:fields:normal:heading_tag:value
l.settings:instance:content:heading:value
l.settings:instance:content:settings:enabled
l.settings:instance:content:subheading:textsettings:fields:normal:subheading_style:value
l.settings:instance:content:subheading:valueAccessing Values In JavaScript
The entire l.settings:instance strcuture can be output to a JSON object which can them be used in your javascript files for your component
<script>
var instance = <mvt:eval expr="miva_json_encode( l.settings:instance, '')" />;
</script>
//instance.content.subheading.valueFlex Instances Index/Pos
The following variables are available in page templates, which grant access to the flex item, sequence item, sequence item position in its own sequence, and sequence item position in all output sequence item lists. These variables are helpful to output identifying information to the page for testing scripts, javascript tracking (google analytics impressions), A/B testing, etc.
//Sequence Index/Pos
l.settings:sequence_item_pos -- current sequence-item position
l.settings:total_sequence_item_pos -- sequence-item position accounting for all sequences rendered on page
//Flex Item
data-flex-component="&mvte:instance_item:component_code;"
data-flex-item="&mvte:instance_item:item_code;"
//Sequence Item
data-sequence-id="&mvte:sequence_item:id;"
data-sequence-item="&mvte:sequence_item:item;"
l.settings:instance_item
l.settings:sequence_item_pos
l.settings:total_sequence_item_pos
l.settings:sequence_itemImporting & Exporting Flex Components
Flex Components cannot directly be edited via the Miva admin interface like other areas of the software. In order to modify a flex component you first need to export it which will give you a component-name.tar.bz2 file. Components can be viewed and exported under User Interface -> Flex Components.
Packaging and Importing Flex Components
After you've made your edits to the flex component, you convert it back to a tar.bz2 file and import it to Miva. To do that, via command line terminal navigate inside your flex componnet folder and type: (where flex_component is the name of the file you want to create)
tar cvfj ../flex_component.tar.bz2 .
Note
Make sure you run this command from inside the component folder. Don't forget the end period which will include all files in the current folder.
Once the new tar file is created you can import it back to miva under User Interface -> Flex Components ->Upload Component. Once it has been added to Miva, it will be available to any page that uses Page Builder