How to Enable Accordion tab (Read Only) ?

Discussions about Forms Designer for SharePoint 2013 / 2016 and Office 365.
Locked
farah.azahar@uzmagroup.com
Posts: 7
Joined: Wed Dec 19, 2018

19 Dec 2018

Hi, I have a form that have accordion because I want to create the form into few section.
The problem is by using tab control it is easy to disable and enable the tab but for accordion tab how to do it?

Let say I have 3 tabs for my accordion which is :
First: Identification
Second: Approval
Third: Completed

The case is, I want if the person incharge for first accordion tab have fill the field in the first accordion tab then click button save and proceed, the data will be save and it proceed to the second accordion tab by enable and open up the second tab to be edited and make the first accordion tab to become read only can not be edited.
Form Designer.png
Form Designer.png (132.79 KiB) Viewed 2831 times

User avatar
Nikita Kurguzov
Posts: 889
Joined: Mon Jul 03, 2017

19 Dec 2018

Dear Farah,
I think you've asked similar question via our support email, and as I've replied - there are two ways to do it:
1) Save the item, and redirect user to another form with these fields set to Read Only state in the designer. Something similar to this case - https://spform.com/buttons/open-edit-fo ... sharepoint
2) Set the fields to readonly state in the designer with JS, as described here - https://spform.com/javascript-framework ... point-2010

Disabling a section might not be the best approach, as the user won't even be able to look at the details after saving. As for setting fields to readonly state with JS - there is an issue, the data is not really saved yet, it's just non-editable after being set to readonly.

Which approach to take is up to you, of course. Depending on what you choose, we can try and help with implementation, just ask if you have any questions!
Cheers

farah.azahar@uzmagroup.com
Posts: 7
Joined: Wed Dec 19, 2018

26 Dec 2018

Hi Nikita, I have no experience using sharepoint and I do need your help for no 1) that you reply to me before, do you have a video tutorial for that because I have no clue how to do it even when I open the article that you share. If you have a video for that, I really appreciate if you can help me by share the link.

Thanks and regards, Farah.

User avatar
Nikita Kurguzov
Posts: 889
Joined: Mon Jul 03, 2017

26 Dec 2018

Dear Farah,
Here's a very basic example using just New Form and Edit Form, but you can also use Form Sets, and open specific form when Invoice number is specified, for example.

This is just how it could work with New and Edit form only - https://youtu.be/iVCBEex_bfw
Cheers

farah.azahar@uzmagroup.com
Posts: 7
Joined: Wed Dec 19, 2018

27 Dec 2018

:D Wow thank you so much. :D

farah.azahar@uzmagroup.com
Posts: 7
Joined: Wed Dec 19, 2018

27 Dec 2018

Hi Nikita, I follow your step in the video and it works but for the related item that I attach in the first accordion tab is not shown up when the form direct to edit form. Is it possible to make the list item that i attach in related item listed in the edit form but for display only and can not be editable ? I attached here the image of new form and after it redirect to edit form for your review.
Attachments
Test 1.png
Test 1.png (139.91 KiB) Viewed 2794 times
test 1.1.png
test 1.1.png (140.97 KiB) Viewed 2794 times

User avatar
Nikita Kurguzov
Posts: 889
Joined: Mon Jul 03, 2017

27 Dec 2018

Dear Farah,
It seems like the Children are not bound to Parent properly. Have you tried saving New Form with Children, and then opening Edit Form? I think it will have the same result.

Now, if you don't have children bound automatically from New Form to Edit Form, make sure to follow this instruction step by step - https://spform.com/documentation/related-documents
Cheers

farah.azahar@uzmagroup.com
Posts: 7
Joined: Wed Dec 19, 2018

28 Dec 2018

Yes, I found out last night I'm not assign the CSS name for the related item. Now the problem are solved. Thank you so much. Another issue is can input text from user bind to plain text in the form so that whatever user type in the input box it will we displayed back on another section of the form by using plain text.

User avatar
Nikita Kurguzov
Posts: 889
Joined: Mon Jul 03, 2017

28 Dec 2018

Dear Farah,
You can try code like this, it should copy the text from a field to the text control (just make sure to give it CSS class, like text-control in the example):

Code: Select all

//copy text on opening of the form
$(".text-control").text(fd.field('Text').value());

//copy text when value changes
fd.field('Plain').change(function(){
    $(".text-control").text(fd.field('Text').value());
});
Cheers

Locked
  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests