{"id":18320896,"url":"https://github.com/bazaarvoice/api-submission-form","last_synced_at":"2025-08-19T13:13:43.115Z","repository":{"id":66754564,"uuid":"42738146","full_name":"bazaarvoice/api-submission-form","owner":"bazaarvoice","description":"Tutorial to use a Conversation API response to dynamically set the sequence of HTML inputs on a submission form.","archived":false,"fork":false,"pushed_at":"2016-09-06T19:49:31.000Z","size":2107,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-02-15T08:30:58.359Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://developer.bazaarvoice.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bazaarvoice.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"Contributing.md","funding":null,"license":"License.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-09-18T17:52:28.000Z","updated_at":"2021-09-17T04:59:08.000Z","dependencies_parsed_at":"2023-02-24T16:15:28.524Z","dependency_job_id":null,"html_url":"https://github.com/bazaarvoice/api-submission-form","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bazaarvoice/api-submission-form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bazaarvoice%2Fapi-submission-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bazaarvoice%2Fapi-submission-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bazaarvoice%2Fapi-submission-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bazaarvoice%2Fapi-submission-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bazaarvoice","download_url":"https://codeload.github.com/bazaarvoice/api-submission-form/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bazaarvoice%2Fapi-submission-form/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271158557,"owners_count":24709092,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-19T02:00:09.176Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T18:17:46.598Z","updated_at":"2025-08-19T13:13:43.083Z","avatar_url":"https://github.com/bazaarvoice.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# API Submission Form\n\n[Developer README](/Contributing.md)\n\nThis tutorial shows you how to use a Conversation API response to dynamically set the sequence of HTML inputs on a submission form.\n\n## Overview\nBuilding a static submission form is not an ideal strategy and might not work at all. Fortunately, the Conversations API provides the data you need to build dynamic forms and will always show the correct fields and configurations.\n\nDevelopers should consider the [Submission Fundamentals](https://developer.bazaarvoice.com/apis/conversations/tutorials/submission_fundamentals) tutorial which provides an in-depth examination into the components involved in CGC submission to the Conversations API. This includes the use of the [action](https://developer.bazaarvoice.com/apis/conversations/tutorials/submission_fundamentals#the-action-parameter-and-the-submission-process) parameter. \n\nAn even more in-depth discussion into the how to build forms can be found by reading [How to Build a Submission Form](https://developer.bazaarvoice.com/apis/conversations/tutorials/How_to_Build_a_Submission_Form) and should be considered an accompanying write up to this tutorial. \n\n## Specifics\nIn this tutorial, the [manifest.json](https://github.com/bazaarvoice/api-submission-form/blob/master/Node/public/manifest.json) (seen below) is used to determine the order of the HTML inputs. As you can see in the [file](https://github.com/bazaarvoice/api-submission-form/blob/master/Node/public/manifest.json), the submission form inputs will be presented in the following order: Review Title, Review Text, Rating, Context Data Group. By rearranging the elements in the [manifest.json](/public/manifest.json) file and restating the application, the order of the input elements will honor the changes. \n\nThe tutorial also honors the [\"Type\"](https://developer.bazaarvoice.com/apis/conversations/tutorials/input_types) key values returned for the various Fields to generate the correct [HTML inputs](https://github.com/bazaarvoice/api-submission-form/blob/master/routes/index.js#L61).\n\nIn this tutorial The [manifest.json](\nIn this tutorial, the [manifest.json](https://github.com/bazaarvoice/api-submission-form/blob/master/Node/public/manifest.json) also controls the [labels](/routes/index.js#L102) for the HTML inputs.\n\n```javascript\n{\n    \"data\": [\n        {\n            \"Type\": \"Field\",\n            \"Id\": \"title\",\n            \"Label\": \"Title from Manifest\"\n        },\n        {\n            \"Type\": \"Field\",\n            \"Id\": \"reviewtext\",\n            \"Label\": \"Review Text from Manifest\"\n        },\n        {\n            \"Type\": \"Field\",\n            \"Id\": \"rating\",\n            \"Label\": \"Ratings from Manifest\"\n        },\n        {\n            \"Type\": \"Group\",\n            \"Id\": \"contextdatavalue\"\n        }\n    ]\n}\n```\n\n##Details\nA \u003ca href=\"https://developer.bazaarvoice.com/docs/read/conversations/reviews/submit\"\u003eSubmit Review\u003c/a\u003e request is made to the Conversations API. \n\nThe manifest.json is used to determine the rendered HTML inputs. The following is a summary of the code:\n- The code find the element in the API response generated from the preview, either a Fields element or a Group element. If a Group is indicated, the code iterates through the fields until the Group is completed.  \n- Determines what input type should be rendered (text input, boolean, integer, select input, etc.).\n- If the type is select input, the options are also rendered.\n- Sets a Label if one is present in the respone. If not looks in the manifest.json to find one.\n- Sets a default value if one is provided in the response.\n\n## Solutions\n\n### [Node.js](https://github.com/bazaarvoice/api-submission-form/tree/master/Node.js)\n\nThe following is aimed at developers who are interested viewing the tutorial built out using [Node.js](https://nodejs.org/en/). To view the tutorial follow the instructions below. \n\n- Clone this repo:\n```\ngit clone https://github.com/bazaarvoice/api-submission-form\n```\n\n- Install the dependencies and run the example from the correct dir:\n```\nnpm install\nchange dir to 'Node' folder\nDEBUG=dynamic_form npm start\n```\n\nThe node server should spin up and display a form similar to the following: \n\u003cimg width=\"45%\" alt=\"screen shot 2015-11-24 at 2 21 47 pm\" src=\"https://cloud.githubusercontent.com/assets/2584258/11379695/48dc6440-92b7-11e5-93b3-d3d62a3011e0.png\"\u003e\n\n- Stop the NODE server.\n```\nCTRL-C from the terminal\n```\n\n- Modify the manifest.json file by rearranging the JSON nodes.\n- Re-start the NODE server\n```\nDEBUG=dynanic_form npm start\n```\nThe order of different HTML inputs should reflect the order in the manifest.json file.\n\n##Disclaimer\nThis code is for educational purposes only and should not be used in production code. Clients will have different configuration which will result in differing response. \n\n##Contributing\n@jwbanning\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbazaarvoice%2Fapi-submission-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbazaarvoice%2Fapi-submission-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbazaarvoice%2Fapi-submission-form/lists"}