How to Enable Accordion tab (Read Only) ?

[farah.azahar@uzmagroup.com]

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 (132.79 KiB) Viewed 2838 times

[Nikita Kurguzov]

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!

[farah.azahar@uzmagroup.com]

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.

[Nikita Kurguzov]

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

[farah.azahar@uzmagroup.com]

Wow thank you so much.

[farah.azahar@uzmagroup.com]

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.

[Nikita Kurguzov]

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

[farah.azahar@uzmagroup.com]

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.

[Nikita Kurguzov]

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());
});