Skip to content

Accessing Property Values#

Flex Component values are made available at render time through the l.settings:instance structure. This object contains the full resolved data set for a single rendered instance of your component, based on the user’s inputs in Page Builder.

This guide outlines how different property types are structured in l.settings:instance, how to output their values in .mvt templates, and how to access them in JavaScript.

Simple Value Types#

These property types store a single value directly under their code:

text Example#

{
  "code": "headline",
  "type": "text",
  "prompt": "Headline Text"
}

Template Output

&mvte:instance:headline;

checkbox Example#

{
  "code": "show_button",
  "type": "checkbox",
  "prompt": "Show CTA Button"
}

Template Output

<mvt:if expr="l.settings:instance:show_button EQ 1">
  <a class="cta">Click Me</a>
</mvt:if>

Object-Based Properties#

These return nested fields inside an object structure. You must access individual fields within the structure.

{
  "type": "link",
  "code": "cta_link",
  "prompt": "Call to Action"
}

Template Output

<a href="&mvte:instance:cta_link:url;" target="&mvte:instance:cta_link:target;">
  &mvte:instance:cta_link:value;
</a>

image#

{
  "code": "main_image",
  "type": "image",
  "prompt": "Main Image",
  "height": 580,
  "width": 1440,
  "responsive_images": [
    {
      "code": "mobile",
      "height": 595,
      "prompt": "Mobile Image",
      "width": 640
    }
  ]
}

<img src="&mvte:main_image:image;" alt="&mvte:main_image:alt;">

Group Properties#

Top-Level Group#

{
  "type": "group",
  "code": "banner",
  "properties": [
    { "code": "heading", "type": "text" },
    { "code": "subheading", "type": "text" }
  ]
}

&mvte:instance:banner:heading:value;
&mvte:instance:banner:subheading:value;

List Properties#

List of Text#

{
  "type": "list",
  "code": "features",
  "list_type": "text",
  "prompt": "Feature List"
}

<mvt:foreach iterator="item" array="instance:features:children">
  <li>&mvte:item:value;</li>
</mvt:foreach>

List of Groups#

{
  "type": "list",
  "code": "slides",
  "list_type": "group",
  "properties": [
    { "code": "heading", "type": "text" },
    { "code": "group_image", "type": "image" }
  ]
}

<mvt:foreach iterator="slide" array="instance:slides:children">
  <h2>&mvte:slide:heading:value;</h2>
  <img src="&mvte:slide:group_image:image;">
</mvt:foreach>

Debugging: Print Instance Values#

<mvt:assign name="g.mvt_debug" value="glosub( miva_array_serialize( l.settings:instance ), ',', asciichar( 10 ) )" />
<pre>
@@l.settings:instance
&mvt:global:mvt_debug;
</pre>

JavaScript Access#

<script>
  var instance = <mvt:eval expr="miva_json_encode( l.settings:instance, '' )" />;
  console.log(instance);
</script>

Summary#

  • Each property becomes a key in l.settings:instance
  • Object and list types use dot notation and children
  • Group properties may be flattened or nested
  • Debugging helps clarify structure for development

Next Steps#