Dynamic forms with slicemachine

Developing with Prismic
1

Hi everyone,
I'm currently looking to create a dynamic form with conditional dropdowns.

Here is the scenario:
I have a dropdown with a name="contact_reason" with 4 options,
When I select an option a new dropdown is displayed with new options (we can call the suboptions).
Finally I want to submit the key contact_reason with the selected suboption value

I'm trying to find the best way to handle that through the slicemachine but can't figure out how I can connect different slices together.
I was also thinking of creating repeatable zone nested in repeteable zone but it doesn't seems allowed.

Any clues to help me? :slight_smile:
Thanks

3

Hello Romain,

Welcome to the Prismic community, and thank you for reaching out to us.

You can create a dropdown or connect to a different Slices with the help of Content Relationship field in Slice Machine also.

When you create a Slice, give a CR field, and to model this field, click on the pencil button.

Screen Shot 2022-01-13 at 14.40.52
Screen Shot 2022-01-13 at 14.40.521524×362 20.9 KB

It will open a layout to choose a different Custom Type to link with this field. You can not link to a specific Slice but a full Custom type.

After that, to retrieve content from Slices, you need to use GraphQuery.

Note: GraphQuery only retrieves fields till three levels down.

Let me know if you have any further questions.

Thanks,
Priyanka

5

Thanks Priyanka, CR seems pretty interesting indeed.

I think I cracked it but my graphQuery fails so I fetch the whole customType. Just need to improve that point.

6

Hello @myrob

You need to mention Custom Type API ID while fetching the linked documents. To help you further, I need the following:

  1. Configuration of Custom Types and Content relationship field.
  2. How are you retrieving fields using Content Relationships? (You can paste your code here).

Thanks,
Priyanka

7

Worth pointing out that fetching Slice Machine slices with graphquery is currently broken.

8

Hello @kris

GraphQuery works well with Slice Machine now. What issue are you getting?

Thanks,
Priyanka

9

Hi Priyanka,

The issue has been well explained in the ticket I shared in my other comment.

A colleague of yours said that they were able to replicate it, but there wasn't a follow up comment to say that it was fixed. I just encountered it yesterday.

Cheers,
Kris

10

Hello @Priyanka
Well I did like this. It works like this without the graphQuery but I fetch to many info

options.map((option) => {
  return client
         .getByUID(option.subOptions.type, option.subOptions.uid)
         .then((data) => data)
         .catch((err) => console.error(err))
})

The CT I use to get the slice I need is

{
  "id": "dropdown-suboption",
  "label": "Dropdown Suboption",
  "repeatable": true,
  "status": true,
  "json": {
    "Main": {
      "uid": {
        "config": {
          "label": "uid",
          "placeholder": ""
        },
        "type": "UID"
      },
      "slices": {
        "type": "Slices",
        "fieldset": "Slice Zone",
        "config": {
          "choices": {
            "form_input": {
              "type": "SharedSlice"
            }
          }
        }
      }
    }
  }
}

Also what I tried is that I called a <SliceZone> inside my slice, is it a risky move or not?

11

Hello @myrob

Sorry for not being able to come back on time.

Okay. That's a good option too. In that case, you have to fetch many things.

I don't understand that part. What framework are you using? Can you paste your code here?

Thanks,
Priyanka