• First, we must gather the question and options that the user wants for their feedback/review form. To accomplish this, we can create a bottom navigation bar widget called "Feedback or Review template settings" that enables the user to provide their personalized feedback/review question along with its options as input. We can accomplish this using the widgets approach explained earlier in this post.

• Next, we must save the values the user provides for the question and options. We can accomplish this by using the data storage extension properties, which will store the data and make it available across the app/extension. (Now that we have the values stored for the entire extension/app, we can retrieve the data and access it across the necessary entities.)

• In our example, we want to collect feedback/reviews from users for the tasks and issues entities. For this, we can create a widget called "Feedback or Review" in the details page of the task and issue entities, respectively.

• In this widget, we must populate the question with the options the user previously provided as part of the "Feedback or Review template settings" widget. We can accomplish this by retrieving the previously saved details and displaying them in the relevant entities (tasks and issues, in our example).

• Once we've displayed the question and options to the user, they can select an option to provide feedback or a review for the entity they're working on.

• Furthermore, we can save the user's option selection and associate it with the entity. This will enable us to display the previously selected option for that question each time the user accesses the "Feedback or Review" widget, which we can accomplish using the data storage-entity properties concept.

• An extension configuration process includes the following:
• Creating an extension.
• Configuring the plugin manifest.
• Setting up the widget code.

• Bottom navigation bar widget (top_band): Enables the user to input their customized values for the feedback/review template's question and its options.
• Task details tab widget (task_tab)/Issue details tab (issue_tab): Enables us to fetch and display the value the user enters for the feedback/review template in the respective entities.

                                                                  

                                                

• In the code snippet above for the bottom navigation bar widget, the user is presented with two text boxes: one for entering their customized question for feedback/review and the other for entering their customized options, each separated by a comma.

• When the user inputs these details and clicks the Add button, the values the user provides are saved using the extension properties in data storage feature.

➤ The app.store method in the extension properties is used to store this data against the extension in the form of key-value pairs.

➤ The values for the question and options are constructed as a JSON object and then stored against the key "storedappvalue" using the app.store method.

Note: For user-entered options separated by a comma, these options are converted to an array using the split() method, with the comma serving as the criteria, and then stored against the key.

➤ Finally, when the values are successfully stored after clicking the Add button, the zohoprojects.invoke method is used, and the user is notified with the alert "Data added".

• Additionally, every time this widget loads, the data stored at the app level in the key "storedappvalue" is obtained using the app.retrieve method.

• From this retrieved value, any previously stored data against the key "storedappvalue" is removed using the app.remove method.

• This is done because whenever a user wishes to change their feedback/review question and options, the new data will be added and stored against the key as well. Since we require the newly entered values to be displayed as part of our "Feedback or Review" widget in the tasks and issues entities, the previously stored data is removed, and the new values entered are stored against the key upon clicking on the Add button.

• In the code snippet above—for task/issue details tab—we're first retrieving the value stored against the extension (in the bottom-band navigation bar) by invoking the app.retrieve method using the key "storedappvalue".

• From this retrieved value, we fetch the question and its options. The options for the question are displayed in the widget in radio button format, which enables the user to choose one option for the feedback/review question.

• Once the user chooses an option and clicks the Save button, the data is saved using the entity properties in data storage feature.

➤ Here, the selected review option (selectedreview) value and its index position (selectedoptionnumber) in the radio button element are stored using the entity.store method. We use entity storage here since this value chosen is specific to the entity the user is working on.

• Every time the widget loads, the chosen value stored using the entity.store method is retrieved using the entity.retrieve method and checked against the radio element options. This allows the chosen value to be enabled and displayed to the user every time the widget loads.

Sign up for a Zoho Developer account and start developing extensions for Zoho Projects using Sigma.