How to Add DFFS forms in embed webpart in sharepoint online.

Forums Dynamic Forms for SharePoint How to Add DFFS forms in embed webpart in sharepoint online.

Tagged: 

Viewing 6 reply threads
  • Author
    Posts
    • #33488
      Harsh
      Participant

      I created DFFS form for one list and i want to add this list into homepage of SharePoint Online site.
      I used Embed webpart and add DFFS forms link with iframe tag as per below.

      https://contoso.sharepoint.com/sites/Engineering2/Lists/list2/NewForm.aspx

      but it not work for me….can anyone help me to get only weblink of DFFS form just like we can get link of powerapps form?

      Thanks in Advance.

      • This topic was modified 1 month ago by Harsh.
      • This topic was modified 1 month ago by Harsh.
      • This topic was modified 1 month ago by Harsh.
    • #33503
      Alexander Bautz
      Keymaster

      Hi,
      DFFS is only designed for the default forms so adding it in an iframe might not work properly. I did test with a page viewer web part and added the link like this:

      https://contoso.sharepoint.com/sites/Engineering2/Lists/list2/NewForm.aspx?Source=/sites/Engineering2/SitePages/Success.aspx

      The Source URL parameter points to a page you need to create that has a “Thank you for submitting the form” message.

      In your NewForm Custom JS you must add this line to hide all but the form (so you don’t get the left menu and all the SharePoint UI rendered in the iframe:

      jQuery("body").addClass("ms-fullscreenmode");

      Let me know how it works out.

      Alexander

    • #33527
      Harsh
      Participant

      Hello, Alexander
      Hiding left menu totally works for me,
      But i am using modern communication site so page viewer webpart will not work for me,
      Is there any other way to set DFFS form at webpart, SPFx will also work for me.
      Thanks & Regards
      Harsh

      • #33531
        Alexander Bautz
        Keymaster

        You should be able to use the “Embed” webpart in a modern site – use an iframe like this:

        <iframe width=800 height=1000 src="https://contoso.sharepoint.com/sites/Engineering2/Lists/list2/NewForm.aspx?Source=/sites/Engineering2/SitePages/Success.aspx">

        Alexander

    • #33533
      Harsh
      Participant

      Thanks,
      Problem is Embed tag load entire page, i want only form into webpart,
      also I don’t redirect to other page after save and submit form, how can i stay on same form after save or cancel this from?

    • #33535
      Harsh
      Participant

      Hello,
      After submitting form it is possible to show popup like form submit successfully including close button?
      When user close that popup button i want to display same form, is that possible?
      Thanks.

      • #33539
        Alexander Bautz
        Keymaster

        Yes, this must be created in the “receipt-page” – the code can be like this:

        <script>
        alert("Form submitted successfully, click OK to reload the form.");
        location.href = "http://_path_to_your_modern_page_where_the_form_lives";
        </script>

        Alexander

    • #33537
      Alexander Bautz
      Keymaster

      You must add the line to the custom js as I described earlier – this hides the parts outside the form.

      The redirect page is necessary because the form lives in an iframe (a window) in the page – when submitting the form, this window will either show your “receipt page”, or it will redirect to the default list view of the list you have added an item to – still in the window in your modern page.

      Alexander

      • #33541
        Harsh
        Participant

        I got the point, I already created one page that shows submit message.
        How can i display alert/popup when form will be save?
        when user close alert i need to redirect user to same New form.
        I want all this in embed webpart into modern SharePoint home page.

        Hope i am able to explain well,
        Thanks for answering in very quick time.

      • #33543
        Alexander Bautz
        Keymaster

        I gave a code example in my previous comment – using location.href = …

        Alexander

      • #33545
        Harsh
        Participant

        Hey,
        I tried to add code in custom js of new form, but it doesn’t work for me.

      • #33550
        Alexander Bautz
        Keymaster

        It works in my test – can you show a screenshot of what you have added?

        Alexander

    • #33563
      Harsh
      Participant

      i just add this code in Custom JavaScript part of new form.

      <script>
      alert(“Form submitted successfully, click OK to reload the form.”);
      location.href = “http://_path_to_your_modern_page_where_the_form_lives&#8221;;
      </script>

      can you explain how this code will fire when form will submit?

      • #33571
        Alexander Bautz
        Keymaster

        The code you have here should not be added in the Custom JS, but in the “landing page” used in the Source attribute in the URL you use as src for the iframe.

        In your NewForm Custom JS you must add this:

        jQuery("body").addClass("ms-fullscreenmode");

        Alexander

Viewing 6 reply threads
  • You must be logged in to reply to this topic.