蜜豆视频

DocumentationJourney Optimizer Home

Use editable form fields in code-based experiences code-based-form-fields

Last update: Mon Jul 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Experienced
  • User

For both more flexibility and control over the code-based experiences, Journey Optimizer allows your development team to create JSON or HTML content templates containing specific predefined editable fields.

When creating a code-based experience, non-technical marketers can then directly edit these fields in the interface, without the need to even open the personalization editor, or to touch any other code elements in their journey or campaign.

This capability provides a simplified experience for marketing users while allowing developers more control over the code content, resulting in less room for errors.

Understand the form field syntax form-field-syntax

To make portions of an HTML or an JSON code payload editable, you must use a specific syntax in the expression editor. This involves declaring a variable with a default value that users can override after applying the content template to their code-based experience.

For example, suppose you want to create a content template to apply it to your code-based experiences, and allow users to customize a specific color used in different locations, such as frames or buttons鈥 background colors.

When creating your content template, you need to declare a variable with a unique ID, for example 鈥color鈥, and call it at the desired locations in the content where you want to apply this color.

When applying the content template to their content, users will be able to customize the color used wherever the variable is referenced.

Add editable fields to HTML or JSON content templates add-editable-fields

To make some of your JSON or HTML code editable, start by creating a code-based experience content template where you can define specific form fields.

NOTE
This step is usually performed by a developer persona.

鉃★笍 Learn how to add editable fields to code-based experience templates in this video

  1. Create a content template and select the Code-based experience channel. Learn how to create templates

  2. Select the authoring mode: HTML or JSON.

    note caution
    CAUTION
    Changing the authoring mode will result in losing all of your current code. The code-based experiences based on this template need to use the same authoring mode.

  3. Open the personalization editor to edit your code content.

  4. To define an editable form field, navigate to the Helper functions menu in the left navigation pane and add the inline attribute. The syntax to declare and call the variable is automatically added in your content.

    {width="85%"}

  5. Replace "name" with a unique ID to identify the editable field. For example, enter 鈥渋mgURL鈥.

    note note
    NOTE
    The field ID must be unique and cannot contain spaces. This ID should be used everywhere in your content where you want to display the variable鈥檚 value.

  6. Adapt the syntax to suit your needs by adding parameters detailed in the table below:

    table 0-row-3 1-row-3 2-row-3
    Action Parameter Example
    Declare an editable field with a default value. When adding the template to your content, this default value will be used if you don鈥檛 customize it. Add the default value between the inline tags. {{#inline "editableFieldID"}}default_value{{/inline}}
    Define a label for the editable field. This label will display in the code editor when editing the template鈥檚 fields. name="title" {{#inline "editableFieldID" name="title"}}default_value{{/inline}}

  7. Click Preview form fields to check how the editable form fields will display in the code-based experiences applying this template.

    {width="85%"}

  8. Use the {{{name}}} syntax in your code at every place where you want to display the value of the editable field. Replace name with the unique ID of the field defined earlier.

    {width="85%"}

  9. Proceed similarly to add other editable fields, wrapping each of them with the {{#inline}} and {{/inline}} tags.

  10. Edit the rest of your code as needed, including the IDs corresponding to the editable fields you defined. Learn how

  11. Save your template.

Use decision policies in editable field forms decision-policy-in-form-fields

When creating a code-based experience content template, you can use a decision policy to leverage offers in your editable form fields.

  1. Create a code-based experience template as described above.

  2. Click Add decision policy either using the Show Decisioning icon from the right rail of the edition screen, or in the expression editor from the Decision policy section on the left menu.

    Learn how to create a decision policy in this section.

  3. Click the Insert policy button. The code corresponding to the decision policy is added.

  4. After the {{#each}} tag, insert the code corresponding to the editable form field(s) that you want to add, using the inline syntax described above. Replace "name" with a unique ID to identify your editable field. In this example, use 鈥渢itle鈥.

    {width="90%"}

  5. Click Preview form fields to check how the editable form fields will display in the code-based experiences applying this template.

    {width="70%"}

  6. Insert the rest of your code above the {{/each}} tag. Use the {{{name}}} syntax in your code at every place where you want to display the value of your editable field. In this example, replace name with 鈥渢itle鈥.

    {width="85%"}

  7. Save your template.

Code examples code-examples

Below are a few examples of JSON and HTML templates, some of them including decision policies.

JSON template:

{{#inline "title" name="Title"}}Best gear for winter is here for you!{{/inline}}
{{#inline "description" name="Description"}}Add description{{/inline}}
{{#inline "imgURL" name="Image Link"}}Add link{{/inline}}
{{#inline "number_of_items" name="Number of items"}}23{{/inline}}

{
  "title": "{{}}",
  "description": "{{{description}}}",
  "imageUrl": "{{{imgURL}}}",
  "number_of_items": {{{number_of_items}}},
  "code": "DEFAULT"
}
NOTE
When referencing the inline fields in the JSON payload:
  • String-type fields must be enclosed in double quotes.
  • Integers or booleans must NOT be enclosed in double quotes. (See the number_of_items field in the example above.)

JSON template with decisioning:

{
"offer": [
{{#each decisionPolicy.fff709b7-7fef-4e4e-83d7-594fbcf196c1.items as |item|}}
{{#inline "title" name="Title"}}{{item._mobiledx.Title1}}{{/inline}} {{#inline "description" name="Description"}}{{item._mobiledx.Title2}}{{/inline}} {{#inline "imgURL" name="Image Link"}}https://luma.enablementadobe.com/content/luma/us/en/experience/warming-up/_jcr_content/root/hero_image.coreimg.jpeg{{/inline}}

{
"title": "{{}}",
"description": "{{{description}}}",
"imageUrl": "{{{imgURL}}}",
"link": "https://lumaenablement.adobe.com/web/luma/home", "code": "DEFAULT"
},
{{/each}}
]
}
NOTE
Inline fields for which you want to use decisioning items need to be placed inside the decision policy block - between the {{#each}} and {{/each}}tags.

HTML template:

{{#inline "title" name="Title"}}Please enter title here{{/inline}}
{{#inline "imgSrc" name="Image link"}}{{/inline}}

<div class="TopRibbon__content"><img style="padding: 5px 10px;" class="TopRibbon__image" src="{{{imgSrc}}}" />{{}}</div>
<style> .theme-luma .TopRibbon { background-color: #200098; }</style>

HTML template with decisioning:

{{#each decisionPolicy.f112884a-5654-43ad-9d6d-dbd32ae23ee6.items as |item|}}
{{#inline "title" name="Title"}}Title is: {{item._mobiledx.Title1}}{{/inline}}

<div class="TopRibbon__content"><img style="padding: 5px 10px;" class="TopRibbon__image" src="{{item._mobiledx.HeroBannerImage.sourceURL}}" />{{}}</div>
<style> .theme-luma .TopRibbon { background-color: #200098; }</style>

{{/each}}

Edit form fields in a code-based experience edit-form-fields

Now that the content template containing predefined editable form fields is created, you can build a code-based experience using this content template.

You will be able to easily edit the form fields from a code-based experience journey or campaign, without opening the personalization editor.

NOTE
This step is usually performed by a marketer persona.

  1. From the journey activity or the campaign edition screen, select the content template containing editable form fields. Learn how to use content templates

    {width="60%"}

    note caution
    CAUTION
    The templates available to choose are scoped to either HTML or JSON based on the channel configuration selected beforehand. Only compatible templates are displayed.

  2. The fields that were predefined in the selected content template are available on the right pane.

  3. From the Editable form fields section, you can:

    • Edit each value directly inside the editable fields, without opening the code editor.

    {width="60%"}

    • Click the personalization icon to edit each field using the code editor.

    {width="70%"}

    note note
    NOTE
    In both cases, you can only edit one field at a time, and you cannot edit the rest of the code-based experience content.

  4. If a decision policy was added to the content template, it comes with all the attributes available in the offers catalog schema. You can edit the decision item inline or using the expression editor.

  5. To edit the rest of the code, click the Edit code button and update your full code-based experience content, including the editable form fields. Learn more

How-to video video

Learn how to add editable fields to code-based experience channel content templates.

recommendation-more-help
91a6d90a-6d61-4a62-bbed-ae105e36a860