Onboarding UI - rows and images in JSON

[Bipsibopsi]

Had a quick question about the Onboarding UI that is shown in the examples: I followed along in the code examples but cannot manage to get the second and third rows of 'input' fields to show up. (I'm following the accessoryView JSON example)

I have a local .jpg image that I'd like to use on one of my pages. I have it setup as:

"mediaType":"image",
"mediaPayload":"/path/to/image.jpg"

I feel like I'm missing something simple here.

Thanks for your time.

[SMartorelli]

Hi 👋 Can you post here the json you're using to configure the onboarding UI? Hide any relevant information/PI of course. It would be easier to understand the issue.

[Bipsibopsi]

Hi SM!

A snippet of what I'm using is shown below. If you'd like the whole thing, I'll be happy to post. Thanks for your assistance!!

PAYLOAD=$(cat <<-END
{
"pages":[
{
"title":"WORDS!",
"subtitle":"WORDS.",
"body":"WORD.",
"mediaType":"image",
"mediaPayload":"/IMAGE.jpg"
},
{
"title":"Pre-Flight Information.",
"subtitle":"WORDS.",
"body":"MORE WORDS!",
"accessoryViews":[
[
{
"type":"input",
"payload":"/placeholder Name /title First Name"
},
{
"type":"input",
"payload":"/placeholder Name /title Last Name"
},
{
"type":"input",
"payload":"/placeholder IT00XXXX /title Asset Tag"
},
{
"type":"input",
"payload":"/placeholder email@email.com /title Email Address"
}
]
]
}
]
}
END)

[SMartorelli]

I see, you're using the old format (mediaType and mediaPayload) for the first page and the new one (matrix of accessoryViews) for the second. They won't work together so you should switch also the first page to the new one.
This should be it:

PAYLOAD=$(cat <<-END
{
    "pages":[
              {
                "title":"WORDS!",
                "subtitle":"WORDS.",
                "body":"WORD.",
                "accessoryViews":[
                                    [
                                        {
                                            "type":"image",
                                            "payload":"/image.png"
                                        }
                                    ]
                                ]
              },
              {
                "title":"Pre-Flight Information.",
                "subtitle":"WORDS.",
                "body":"MORE WORDS!",
                "accessoryViews":[
                                    [
                                        {
                                            "type":"input",
                                            "payload":"/placeholder Name /title First Name"
                                        },
                                        {
                                            "type":"input",
                                            "payload":"/placeholder Name /title Last Name"
                                        },
                                        {
                                            "type":"input",
                                            "payload":"/placeholder IT00XXXX /title Asset Tag"
                                        },
                                        {
                                            "type":"input",
                                            "payload":"/placeholder email@email.com /title Email Address"
                                        }
                                    ]
                                ]
                }
            ]
}
END)

Let me know if it works as expected now 👍

[Bipsibopsi]

Yes, that worked well. I was missing two things - the first one you mentioned and that was the main issue. The second was that the image I was using was .jpg. I changed that to a .png and everything worked. Thanks!!

For the second page where I have four inputs - is there a way to make two on one row and then two on a second row?

[SMartorelli]

Yes sure! As you can see you have there a matrix (Array of arrays) so that you can place the accessory views in rows and columns. For example to have 2 rows with 2 inputs each in you need to replace this:

[
    [
        {
            "type":"input",
            "payload":"/placeholder NameFirst Name"
        },
        {
            "type":"input",
            "payload":"/placeholder NameLast Name"
        },
        {
            "type":"input",
            "payload":"/placeholder I/title Asset Tag"
        },
        {
            "type":"input",
            "payload":"/placemail@email.com /titlAddress"
        }
    ]
]

With this:

[
    [
        {
            "type":"input",
            "payload":"/placeholder NameFirst Name"
        },
        {
            "type":"input",
            "payload":"/placeholder NameLast Name"
        }
    ],
    [
        {
            "type":"input",
            "payload":"/placeholder I/title Asset Tag"
        },
        {
            "type":"input",
            "payload":"/placemail@email.com /titlAddress"
        }
    ]
]

[Bipsibopsi]

Thanks for your assistance, SM!