Question about creating a "wizard"

, ,
1

On one of our apps, we have a form with 4 tabs (sections) on it. To encourage people to fill out the entire form, we would like to add Next and Previous buttons that navigate through these tabs (sections).

We have gotten as far as adding the buttons, but we have not yet figured out the functionality.

Is there a way to do what we want, and if so, how?

Thank you

2

You can do it using formscript. Check the steps bellow

  1. First you need to find out the id of each section. To find id of the section, open any record or click ‘create new record’. There you can find all section in top tab. Right click on any section and click inspect. so that you can get id of the section.
    e.g. Basic Information

where “9246d61c9c224ed4a03b1e038691144f” refers to id of Basic information section.

  1. Now go to form>formscript. write bellow code in the ONLOAD SCRIPT section

var html = “

”
+ “tab1
”;

var html2 = “

”
+ “Goto tab2
”;

$(“.case_details_forms”).find(“.case_submit_button”).parent().parent().prepend(html2);
$(“.case_details_forms”).find(“.case_submit_button”).parent().parent().prepend(html);

  1. Now in your form you can find 2 buttons i.e “tab1” & “Goto tab2”.

  2. Goto form>fromScript. Reusable function section use following code.

function fun(){
var y=document.getElementById(“customButton”).innerHTML;
if(y.localeCompare(“Goto tab1”)==0)
{
var x=“9246d61c9c224ed4a03b1e038691144f”;
document.getElementById(x).click();
document.getElementById(“customButton”).innerHTML=“tab1”;
document.getElementById(“customButton2”).innerHTML=“Goto tab2”;
}
if(y.localeCompare(“Goto tab2”)==0)
{
var x=“b4221e61180c4cf482c9dd52993b499a”;
document.getElementById(x).click();
document.getElementById(“customButton”).innerHTML=“Goto tab1”;
document.getElementById(“customButton2”).innerHTML=“Goto tab3”;
}
if(y.localeCompare(“Goto tab3”)==0)
{
var x=“89b2d38208804031ba8f2bdb1e540c95”;
document.getElementById(x).click();
document.getElementById(“customButton”).innerHTML=“Goto tab2”;
document.getElementById(“customButton2”).innerHTML=“Goto tab4”;
}

}

function fun2()
{
var z=document.getElementById(“customButton2”).innerHTML;

if(z.localeCompare(“Goto tab2”)==0)
{
var x=“b4221e61180c4cf482c9dd52993b499a”;
document.getElementById(x).click();
document.getElementById(“customButton”).innerHTML=“Goto tab1”;
document.getElementById(“customButton2”).innerHTML=“Goto tab3”;
}

if(z.localeCompare(“Goto tab3”)==0)
{
var x=“89b2d38208804031ba8f2bdb1e540c95”;
document.getElementById(x).click();
document.getElementById(“customButton”).innerHTML=“Goto tab2”;
document.getElementById(“customButton2”).innerHTML=“Goto tab4”;
}

if(z.localeCompare(“Goto tab4”)==0)
{
var x=“34820f5d891a401ca3856ac7998313b2”;
document.getElementById(x).click();
document.getElementById(“customButton”).innerHTML=“Goto tab3”;
document.getElementById(“customButton2”).innerHTML=“tab4”;
}
}

  1. in My case id of 4 section are

section1->9246d61c9c224ed4a03b1e038691144f
section2->b4221e61180c4cf482c9dd52993b499a
section3->89b2d38208804031ba8f2bdb1e540c95
section4->34820f5d891a401ca3856ac7998313b2

Find the id of your section and replace in above code.

1 Like
3

Soumya,

Thank you so much for your help! I implemented your directions and was able to obtain the desired result!

Thanks again,

~Dan

4

you can also implement as shown below(below sample code is implemented for 2 sections)

STEPS TO IMPLEMENT THE NEXT/PREV BUTTON

Go to gear icon ->objects->select object->forms
->Create separate section for each fields of the object
->Click on Form scripts
->In the ‘On Load Scripts’ section paste JavaScript code and its functions should be included in ‘Reusable Scripts Functions’.

JAVASCRIPT CODE

var form = _sdForm
try
{
//next button creation
form.find(“#username”).css( {‘width’: ‘50%’,“margin-bottom”:“0px”});
form.find(“#username”).removeClass(“text_box_case”);
form.find(“#username”).parent().append(
“

”+“<input type=‘button’ onclick=fun() id=‘Next’ name=‘Next’ value=‘Next’”

  • “style='box-shadow: 0 0 0 0 #FFFFFF none;background-color:#397ff5;color:#FFFFFF;border-bottom-right-radius: .7em;border-bottom-left-radius: .7em;border-top-right-radius: .7em;border-top-left-radius: .7em;”
  • " height: 30px;margin-top:-0px; padding: 4px 15px 6px 15px;"
  • " margin-right:5px;margin-left:5px;’ >"
    ) ;

//previous button creation
form.find(“#comment”).css( {‘width’: ‘50%’,“margin-bottom”:“0px”});
form.find(“#comment”).removeClass(“text_box_case”);
form.find(“#comment”).parent().append(
“

”+“<input type=‘button’ onclick=funprev() id=‘prev’ name=‘prev’ value=‘Prev’”

  • “style='box-shadow: 0 0 0 0 #FFFFFF none;background-color:#397ff5;color:#FFFFFF;border-bottom-right-radius: .7em;border-bottom-left-radius: .7em;border-top-right-radius: .7em;border-top-left-radius: .7em;”
  • " height: 30px;margin-top:-0px; padding: 4px 15px 6px 15px;"
  • " margin-right:5px;margin-left:5px;’ >"
    ) ;
    } catch (e) {
    // Report JavaScript errors
    alert(e);
    };

REUSABLE SCRIPT Functions

//fun() and funprev() provide the functionality for the next button and prev button.
function fun()
{
document.getElementById(“3cf9f3b54d864af3b2cdddc273acc62d”).click();
//here 3cf9f3b54d864af3b2cdddc273acc62d is the section id of the next field
}
function funprev()
{
document.getElementById(“923e9bb552594084825014c538414636”).click();
//here 923e9bb552594084825014c538414636 is the section id of the previous field
}