› Forums › Classic DFFS › How to Add DFFS forms in embed webpart in sharepoint online.
Tagged: #DFFSform
- This topic has 13 replies, 2 voices, and was last updated 2 years, 6 months ago by
Alexander Bautz.
-
AuthorPosts
-
-
May 17, 2021 at 12:45 #33488
Harsh
ParticipantI 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.
-
May 17, 2021 at 17:25 #33503
Alexander Bautz
KeymasterHi,
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
-
May 19, 2021 at 07:35 #33527
Harsh
ParticipantHello, 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-
May 19, 2021 at 10:30 #33531
Alexander Bautz
KeymasterYou 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
-
-
May 19, 2021 at 11:11 #33533
Harsh
ParticipantThanks,
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? -
May 19, 2021 at 12:55 #33535
Harsh
ParticipantHello,
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.-
May 19, 2021 at 13:01 #33539
Alexander Bautz
KeymasterYes, 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
-
-
May 19, 2021 at 12:57 #33537
Alexander Bautz
KeymasterYou 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
-
May 19, 2021 at 13:07 #33541
Harsh
ParticipantI 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. -
May 19, 2021 at 13:10 #33543
Alexander Bautz
KeymasterI gave a code example in my previous comment – using location.href = …
Alexander
-
May 19, 2021 at 14:05 #33545
Harsh
ParticipantHey,
I tried to add code in custom js of new form, but it doesn’t work for me. -
May 19, 2021 at 15:30 #33550
Alexander Bautz
KeymasterIt works in my test – can you show a screenshot of what you have added?
Alexander
-
-
May 20, 2021 at 07:50 #33563
Harsh
Participanti 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”;
</script>can you explain how this code will fire when form will submit?
-
May 20, 2021 at 11:30 #33571
Alexander Bautz
KeymasterThe 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
-
-
-
AuthorPosts
- You must be logged in to reply to this topic.