Printing multifield JSON values to components | Community
Skip to main content
D
damon-m
June 4, 2018

Printing multifield JSON values to components

  • June 4, 2018
  • 1 reply
  • 4219 views

I'm trying to come up for a solution where I can have a multifield of 'buttons' at the bottom of a component to have variable number of buttons. I want to make sure to use the same rendering as our button component, but I'm facing two hurdles. I know with buttons I could use a parsys, but I'm looking at this pattern for a number of little includes that wouldn't necessarily use components available to authors in an effort to make sure our authoring and templating is consistent across components

1. the multifield is returning JSON, and I don't want to have to create a JAVA model for a simple component just to parse it. To solve this, I would look at writing a javascript helper to render the multifields

2. `data-sly-resource` doesn't allow you to pass it data.

my multifield data is captured on the components under a node called 'buttons', and we already have a component

I want to do something like this:

<sly data-sly-list="buttons" data-sly-resource="${itemList.index @ resourceType='/components/button'}"/>

My team uses 6.2 right now.. I'm curious if either of the versions up to 6.4 have other ways of doing this.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    1 reply

    smacdonald2008
    smacdonald2008
    June 4, 2018

    When using HTL - using Sling Model and @inject annotation is a better way to work with data/JSON then trying to code a custom JS method. Then you can handle the collection in the HTL syntax, 

    D
    damon-mAuthor
    June 5, 2018

    I'm not very familiar with @inject, or java in general... would this require me to have a java model for every component i want to print a multifield in, or could i add it to a base component?

    I saw this code snippet online:

    <div data-sly-use.multi="${'com.project.sightly.MultiField' @ json=properties.items}"> <div data-sly-repeat="${multi.values}"> <h2>${item['linkLabel']} - ${item['anchor']}</h2> </div> </div>

    and will give that a try for the json. in terms of passing `properties.buttons` to a component, I may be stuck making a template that's used by both components

    D
    damon-mAuthor
    June 5, 2018

    (oh i now understand from reading more carefully, that this code sample assumes the creation of a custom java class without providing it )

    Terms & ConditionsAccessibility statement

    Loading footer...