Skip to main content

Notifications

SurveyJS Dynamic Edit Form

takolota1 Profile Picture Posted by takolota1 4,617


Allow external users to update their internal data / records.

SurveyJS forms hosted by Power Automate are very useful if you need something more customizable than a Microsoft Form and more accessible to external users than a Power App form.
You can see Paulie's general explanation of this SurveyJS & Power Automate set-up here for the basics & for new form entries. I'll build off this to show some more advanced customizations & capabilities, including a demonstration of update / edit form entries.

-Dynamic information based on the customer (customer guid Id in a url parameter)
-Table displaying related records (like recent order data)
-Existing field values filled in as defaults
-Existing files, new file upload inputs (without signing in to a Microsoft account), & signature input



-Deep linking for different edit forms with different data for different customers (customer guid Id in a url parameter)


-Dropdown with dynamic options depending on the distinct values in a table, along with an "Other" option allowing users to add new values that then become dropdown options for all other users


-Viewing of existing record files (links that open to the file in a new tab)











Demo Import & Set Up

Go to the bottom of this post & download the SurveyJSDynamicForm_1_0_0_xx.zip file. Go to the Power Apps home page (https://make.powerapps.com/). Select Solutions on the left-side menu, select Import solution, Browse your files & select the SurveyJSDynamicForm_1_0_0_xx.zip file you just downloaded. Then select Next & follow the menu prompts until you got to the menu to apply or create the required connections for the solution flows.


Select or create connections for any connections that need attention, until you get to the HTTP with Microsoft Entra ID (preauthorized) connection. We need to set this connection up for Dataverse API calls.


To get the correct Base Resource URL for the Dataverse API we can open a new tab, go to Tables in the Power Apps menu, select a table like Accounts, select the Tools dropdown, go to API link to table definition, & copy the dynamics organization portion of the url on the page that opens. 



Then paste that dynamics organization url into the Base Resource URL inputs. Then Sign in with your MS account.


From there, follow the remaining prompts until the solution is successfully imported.

Once the solution is imported, find & select the SurveyJS Dynamic Form in the list of solutions. Go to Cloud flows, then go to edit the SurveyJS Dynamic Form Submissions flow.


Copy the trigger HTTP POST URL, go back to the Cloud flows menu, edit the SurveyJS Dynamic Form Page flow, scroll towards the bottom of the flow & paste the url in the SubmissionFlowUrl action. This ensures form submissions trigger the SurveyJS Dynamic Form Submissions flow with the form data.



Scroll back to the top of the SurveyJS Dynamic Form Page flow & copy the trigger HTTP GET URL. Go back to the Cloud flows menu & select to edit the Email Personalized Form Links flow. Paste the url in the Form Webpage Url action. This sets things so the emails for each demo customer include a link to the form page, alongside the Id parameter with the customer guid from the List rows.


After the form page & submission urls have been inserted where needed, we need to load the demo sample data & files to our tables. Go back to the Cloud flows menu & select to edit the Load Demo Table Data flow. Once in the flow select Test in the top-right & follow the prompts to run the flow.


After the Load Demo Table Data flow has run, go back to the Cloud flow menu & select to edit the Email Personalized Form Links flow. Select Test in the top-left of the flow menu & follow the prompts to run the flow. That should send several emails to your inbox, one for each demo customer with their own personal form link to edit their data.


That should send several emails to your inbox, one for each demo customer with their own personal form link to edit their data.




From there you can explore the user experience of the edit forms and review how various pieces of the form are put together & saved to records in the Form Page & Form Submissions flows.


Thanks for any feedback,

Please subscribe to my YouTube channel (https://youtube.com/@tylerkolota?si=uEGKko1U8D29CJ86).

And reach out on LinkedIn (https://www.linkedin.com/in/kolota/) if you want to hire me to consult or build more custom Microsoft solutions for you.




Categories:

AI Builder

Comments