Add values into json explorer based on user input

App Building
1

Hi Retool folks,

I have a current use case where I am looking to add values into a json configuration via json explorer. I want to add the value which the user inputs through a text input and I can replace a value but I need some guidance on how to permanently add the data(vs replace a value). I have attached a screen shot below where the is the user text input(for illustrative purposes). The goal of this is to allow a user to add a single or multiple values and then save the json configuration and upload it to github. I also need to be able to have the user go straight to a specific line of the json config(can this be done without use CTRL-F?) Thanks.

image

2

Instead of having users interact with the JSON explorer/editor, have you considered using a form with the various configs as text inputs and then creating the JSON you want to sent to GitHub from the inputs behind the scenes? If you want to let the user fully explorer before sending, you could have a “generate config” button that creates the JSON and populates a JSON explorer, and then a “send config” button that the user can click when they confirm they set it up right.

3

Hi @jg80 that is something I didn't know was possible, thank you. I did have a question, do you mean create a JSON Schema form or regular form? I tried experimenting with both but was not successful. Are you able to provide a screenshot of what you describe? I have no experience with forms thus far and want to understand your suggestion in more depth.

4

Sure, I meant to let the users select configurations from drop downs in a form component, and then create the object and send it wherever when they submit the form.

The basics are like this:

image
image1078Ă—340 35.3 KB

The form has the configuration options setup in the drop down lists. I've turned off "Reset after successful submit" so the form remains populated after clicking submit, and I've setup the submit to trigger a query:
image
The "makeJSON" JS query creates the configuration JSON object, and the JSON explorer has makeJSON.data as its data source.

Once this is all set, I can set the variables, hit "submit" in the form, and this is what I see:
image

You can have another button to send the object wherever you need it to go (maybe a "confirm" on top of the JSON explorer).

The trick will be getting the JS that created the JSON right (my sample is below to get you started). Happy building!

// Creating a JSON object
var configJSON = {
    "topKey": form1.data.select1,  //reference the form components as such
    "subKey": {
        "nestedKey1": form1.data.select2,  //they can go at whatever level
        "nestedKey2": form1.data.select3
    },
};

return configJSON
1 Like
5

Thank you @jg80!