Render different fields dynamically and pass data to them based on selected value

Custom Apps
1

Hi everyone, I’ve been trying to solve a usecase for my custom app since the last few days. Here is what is happening:

  • I have a RPC which gets the attributes and displays them in a select field. So far so good. Also here is how the RPC data looks like:
 "data": [
        {
            "id": 813,
            "team_id": 4,
            "user_id": 3,
            "type": "text",
            "slug": "recent-text",
            "title": "recent text",
            "description": null,
            "position": 428,
            "hidden": false,
            "settings": [],
            "parent_id": null,
            "created_at": "2023-10-24T16:57:31.000000Z",
            "updated_at": "2023-10-24T16:57:31.000000Z",
            "deleted_at": null,
            "attribute_data": [
                {
                    "audience_id": 90531,
                    "value": "Random text",
                    "created_at": "2023-10-27T06:56:14.000000Z",
                    "updated_at": "2023-10-27T06:56:14.000000Z",
                    "deleted_at": "2023-10-27T06:56:14.000000Z"
                },
                {
                    "audience_id": 90535,
                    "value": "testssssdgs",
                    "created_at": "2023-10-30T15:26:52.000000Z",
                    "updated_at": "2023-10-30T15:26:52.000000Z",
                    "deleted_at": "2023-10-30T15:26:52.000000Z"
                }
            ],
            "options": []
        },
        {
            "id": 808,
            "team_id": 4,
            "user_id": 3,
            "type": "multiple",
            "slug": "recent-multiple",
            "title": "recent multiple",
            "description": null,
            "position": 427,
            "hidden": false,
            "settings": {
                "allowMultiple": true
            },
            "parent_id": null,
            "created_at": "2023-10-24T16:57:22.000000Z",
            "updated_at": "2023-10-24T16:57:22.000000Z",
            "deleted_at": null,
            "attribute_data": [],
            "options": [
                {
                    "id": 809,
                    "team_id": 4,
                    "user_id": 3,
                    "parent_id": 808,
                    "type": "option",
                    "slug": "blue",
                    "title": "blue",
                    "position": 1,
                    "created_at": "2023-10-24T16:57:22.000000Z",
                    "updated_at": "2023-10-24T16:57:22.000000Z",
                    "deleted_at": null,
                    "attribute_data": [
                        {
                            "audience_id": 90513,
                            "value": "blue",
                            "created_at": "2023-10-24T17:06:32.000000Z",
                            "updated_at": "2023-10-24T17:06:32.000000Z",
                            "deleted_at": "2023-10-24T17:06:32.000000Z"
                        },
                        {
                            "audience_id": 90530,
                            "value": "blue",
                            "created_at": "2023-10-26T17:03:36.000000Z",
                            "updated_at": "2023-10-26T17:03:36.000000Z",
                            "deleted_at": "2023-10-26T17:03:36.000000Z"
                        },
                        {
                            "audience_id": 90531,
                            "value": "blue",
                            "created_at": "2023-10-26T17:11:32.000000Z",
                            "updated_at": "2023-10-26T17:11:32.000000Z",
                            "deleted_at": "2023-10-26T17:11:32.000000Z"
                        },
                        {
                            "audience_id": 90535,
                            "value": "blue",
                            "created_at": "2023-10-30T15:30:33.000000Z",
                            "updated_at": "2023-10-30T15:30:33.000000Z",
                            "deleted_at": "2023-10-30T15:30:33.000000Z"
                        }
                    ]
                },
                {
                    "id": 810,
                    "team_id": 4,
                    "user_id": 3,
                    "parent_id": 808,
                    "type": "option",
                    "slug": "green",
                    "title": "green",
                    "position": 2,
                    "created_at": "2023-10-24T16:57:22.000000Z",
                    "updated_at": "2023-10-24T16:57:22.000000Z",
                    "deleted_at": null,
                    "attribute_data": [
                        {
                            "audience_id": 90531,
                            "value": "green",
                            "created_at": "2023-10-27T04:50:04.000000Z",
                            "updated_at": "2023-10-27T04:50:04.000000Z",
                            "deleted_at": "2023-10-27T04:50:04.000000Z"
                        },
                        {
                            "audience_id": 90535,
                            "value": "green",
                            "created_at": "2023-10-30T15:29:44.000000Z",
                            "updated_at": "2023-10-30T15:29:44.000000Z",
                            "deleted_at": "2023-10-30T15:29:44.000000Z"
                        }
                    ]
                },
                {
                    "id": 811,
                    "team_id": 4,
                    "user_id": 3,
                    "parent_id": 808,
                    "type": "option",
                    "slug": "orange-7",
                    "title": "orange",
                    "position": 3,
                    "created_at": "2023-10-24T16:57:22.000000Z",
                    "updated_at": "2023-10-24T16:57:22.000000Z",
                    "deleted_at": null,
                    "attribute_data": [
                        {
                            "audience_id": 90531,
                            "value": "orange",
                            "created_at": "2023-10-27T07:01:15.000000Z",
                            "updated_at": "2023-10-27T07:01:15.000000Z",
                            "deleted_at": "2023-10-27T07:01:15.000000Z"
                        },
                        {
                            "audience_id": 90535,
                            "value": "orange",
                            "created_at": "2023-10-30T15:30:33.000000Z",
                            "updated_at": "2023-10-30T15:30:33.000000Z",
                            "deleted_at": "2023-10-30T15:30:33.000000Z"
                        }
                    ]
                },
                {
                    "id": 812,
                    "team_id": 4,
                    "user_id": 3,
                    "parent_id": 808,
                    "type": "option",
                    "slug": "red",
                    "title": "red",
                    "position": 4,
                    "created_at": "2023-10-24T16:57:22.000000Z",
                    "updated_at": "2023-10-24T16:57:22.000000Z",
                    "deleted_at": null,
                    "attribute_data": [
                        {
                            "audience_id": 90531,
                            "value": "red",
                            "created_at": "2023-10-27T07:01:15.000000Z",
                            "updated_at": "2023-10-27T07:01:15.000000Z",
                            "deleted_at": "2023-10-27T07:01:15.000000Z"
                        },
                        {
                            "audience_id": 90535,
                            "value": "red",
                            "created_at": "2023-10-30T15:30:33.000000Z",
                            "updated_at": "2023-10-30T15:30:33.000000Z",
                            "deleted_at": "2023-10-30T15:30:33.000000Z"
                        }
                    ]
                }
            ]
        },
        {
            "id": 807,
            "team_id": 4,
            "user_id": 3,
            "type": "boolean",
            "slug": "recent-boolean",
            "title": "recent boolean",
            "description": null,
            "position": 426,
            "hidden": false,
            "settings": [],
            "parent_id": null,
            "created_at": "2023-10-24T16:57:05.000000Z",
            "updated_at": "2023-10-24T16:57:05.000000Z",
            "deleted_at": null,
            "attribute_data": [
                {
                    "audience_id": 90513,
                    "value": true,
                    "created_at": "2023-10-24T17:07:46.000000Z",
                    "updated_at": "2023-10-24T17:35:37.000000Z",
                    "deleted_at": "2023-10-24T17:35:37.000000Z"
                }
            ],
            "options": []
        },
        {
            "id": 806,
            "team_id": 4,
            "user_id": 3,
            "type": "number",
            "slug": "recent-number",
            "title": "recent number",
            "description": null,
            "position": 425,
            "hidden": false,
            "settings": [],
            "parent_id": null,
            "created_at": "2023-10-24T16:57:00.000000Z",
            "updated_at": "2023-10-24T16:57:00.000000Z",
            "deleted_at": null,
            "attribute_data": [
                {
                    "audience_id": 90535,
                    "value": 0,
                    "created_at": "2023-10-30T19:19:04.000000Z",
                    "updated_at": "2023-10-30T19:19:04.000000Z",
                    "deleted_at": "2023-10-30T19:19:04.000000Z"
                }
            ],
            "options": []
        }
   ]

As you can see there are different types of attributes like text, number, boolean, multiple.

What I want to achieve is:

  • Filter out all the attributes of the type “option” from the data and show the remaining types in the select dropdown in the format, item.title [item.type]
  • When I select any item with type other than multiple, an input field of the given type should be shown, and for multiple type, a select dropdown should be shown with the options being the one which I’m getting in the data.

I have tried all the methods or ways given in the docs like nested RPCs, select method with nested RPCs but they haven’t been helpful at all.

This is an important feature that I need to implement but it seems like I’ve hit a wall. Any help would be highly appreciated.

2

Hi there,

Did you had the chance to see this example? It kind of reminds me of your setup, except that in your case the RPC will be located inside a select/dropdown parameter.

2 Likes
3

Hello developer,

Your endpoint returns a list of available parameters, their type, and if applicable, available options for that type.

I believe that you don’t need to focus only on the implementation of single/multiple select parameters. Instead, you can implement “Dynamic Fields RPC” that builds the mappable parameters in the module. This approach covers all parameter types that your endpoint returns.

Please, check this documentation about implementing dynamic parameters. The example also includes support for options inside a single/multiple select.

2 Likes
4

Thanks Thomas, will definitely look into this.

2 Likes
5

Thanks a lot Tereza, will check the docs and try to implement it, will let you know the results.

2 Likes
6

Hey, I looked into the example and docs and it looks like I need to use custom IML functions, which are not available by default as far as I know. So do I need to contact the help desk if I need to create one or is there something I’m missing

7

Yes, contact support directly. Here are the specific options to select:

Screenshot_2023-11-07_211123

3 Likes