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

[Harsh]

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 2 years, 11 months ago by Harsh.
• This topic was modified 2 years, 11 months ago by Harsh.
• This topic was modified 2 years, 11 months ago by Harsh.

[Alexander Bautz]

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

[Harsh]

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

[Alexander Bautz]

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

[Harsh]

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?

[Harsh]

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.

[Alexander Bautz]

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

[Alexander Bautz]

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

[Harsh]

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.

[Alexander Bautz]

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

Alexander

[Harsh]

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

[Alexander Bautz]

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

Alexander

[Harsh]

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?

[Alexander Bautz]

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

[Author]

Posts