Ein Formular mit Sektionen für verschiedene Prozessschritte/Aufgabeninhaber

Dieses Beispiel zeigt wie Sie ein generisches Formular mit Sektionen für verschiedene Aufgabeninhaber in mehreren Prozessschritten verwenden. Den Download der fertigen AgilePoint Lösung finden Sie hier.

Gehen Sie wie folgt vor:

1.) Importieren und publizieren Sie die AgilePoint Anwendung

2.)  Schauen Sie sich genau die Artefakte der Lösung an:

Das Formular besteht aus einzelnen Sektionen (eine für jede beteiligte Aufgabe/Aktivität)



Das JavaScript steuert auf Basis des Names der Aktivität das Ein-/Ausblenden einzelner Sektionen und blendet bspw. die Schaltflächen Vor/Zurück aus.

 eFormEvents.onFormLoadComplete = function ()   
 {   
  HideNavigationButtons();  
  var activityDisplayName = GetActivityDisplayName();  
  HandleSectionVisibility(activityDisplayName);  
  OpenAtSection(activityDisplayName);  
 }  
 eFormEvents.onSectionNavigation = function (eventArgs)   
 {   
  // Remark for future usage:  
  // eventArgs.currentSection - will give the current section's header   
  // eventArgs.previousSection - will give the previous section's   
  // header from where it got navigated.  
  HideNavigationButtons();   
  var activityDisplayName = GetActivityDisplayName();  
  HandleSectionVisibility(activityDisplayName);   
 }  
 function HandleSectionVisibility(activityDisplayName)  
 {  
  if(activityDisplayName == '' | activityDisplayName == '${ActivityDisplayName}')  
  {  
       RemoveSection('Approve_1');  
   RemoveSection('Approve_2');  
   // Alternative: hide the whole bar  
   //$("#sectionTabs").hide();   
  }  
  else if(activityDisplayName == 'Approve_1')  
  {  
   RemoveSection('Approve_2');   
  }  
  else if(activityDisplayName == 'Approve_2')  
  {  
  }  
 }  
 function GetActivityDisplayName()  
 {  
  var formHeading = $("#previewPanel > div.previewFormHeading.leftAlign > h2").text();   
  return formHeading;  
 }  
 function OpenAtSection(sectionName)  
 {  
  var options = {};  
  options.sectionName = sectionName;  
  eFormHelper.navigateToSection(options, function (result) {});    
 }  
 function RemoveSection(sectionName)  
 {  
   var sectionDiv = $("[name=" + sectionName + "]");  
   sectionDiv.hide();     
 }  
 function HideNavigationButtons(sectionName)  
 {  
  $("#sectionButtons > button.previous.popActionButtons").hide();  
  $("#sectionButtons > button.next.popActionButtons").hide();    
 }  

Regeln steuern die Interaktion mit dem Formular entsprechend der aktuellen Aktivität



3.) Testen Sie den Durchlauf wie folgt:

Öffnen Sie das Formular



Füllen Sie die erste Sektion aus und senden ab



Öffnen Sie die erste Aufgabe



Füllen die Sektion aus



Wechseln Sie auf die nun nur lesende Sektionen "Submit" (auch wieder optional zurück)



Öffnen Sie die zweite Aufgabe



Füllen die Sektion aus (Rücksprünge auf andere Sektionen möglich)



Testen Sie den Rücksprung auf die Sektion "Submit oder "Approve_1".

Kontaktformular

Name

E-Mail *

Nachricht *