Flex Component Properties#

Component 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 priority to others.

The 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.

Property Syntax#

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 Definitions#

Property Name	Property Type Code
Textbox	`text`
Textarea	`textarea`
Checkbox	`checkbox`
Radio Button	`radio`
Select	`select`
Color Picker	`color`
Date Picker	`date`
Date/Time Picker	`datetime`
Image Selector	`image`
Product Lookup	`product`
Category Lookup	`category`
Link	`link`
Text/Icon Selector	`selector`
Text Editor	`texteditor`
Slider	`slider`
Distributed Slider	`distributor_slider`
List	`list`
Group Multiple Properties Together	`group`

Property Default 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.

Default Value Example#

"defaults": {
    "advanced": {
        "prop_advanced_text_1": {
            "value": "Default Advanced Value 1"
        },
        "prop_advanced_text_2": {
            "value": "Default Advanced Value 2"
        },
        "prop_advanced_text_3": {
            "value": "Default Advanced Value 3"
        }
    },
    "prop_category": {
        "category_code": "Default Value"
    },
    "prop_date_serverdate": {
        "value": {
            "day": 13,
            "hour": 6,
            "minute": 3,
            "month": 5,
            "second": 22,
            "year": 2023
        }
    },
    "prop_datetime": {
        "value": 1661870101
    }
}

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:

Name	Definition
`required`	`true`/`false` (defaults to `false` if omitted)
`text_type`	Values include: `text` (default), `number`, `email`, `url`, `password`, `tel`
`validation_message`	(Optional) Message used to display validation errors when validation using `validation_pattern` 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`	(Optional) 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` = acceptable 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

Note

The required attribute is available on all property types not just text properties

Validation Example#

[
    {
        "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"
    }
]