57
I have created Multi Step form using Power Pages.
Instead of clicking on Next and Previous Button, I need clickable tab, so user can redirect to the specific page automatically. Is there any way to make this tab clickable?
I' m using Multi Step form.
For Example Code for your request:
<!DOCTYPE html>
<html>
<head>
<title>Multi-Step Form</title>
<script src="/WebResources/YourScriptFile.js">
</script>
</head>
<body>
<div id="step1" class="form-step">
<!-- Step 1 Content -->
<h2>Step 1: Personal Information</h2>
<!-- Add your Entity Form for Step 1 -->
{{ entityform.name_of_your_entity_form_for_step_1 }}
<button onclick="goToNextStep(1, 3)">Next</button>
</div>
<div id="step2" class="form-step">
<!-- Step 2 Content -->
<h2>Step 2: Address Details</h2>
<!-- Add your Entity Form for Step 2 -->
{{ entityform.name_of_your_entity_form_for_step_2 }}
<button onclick="goToNextStep(2, 3)">Next</button>
<button onclick="goToPreviousStep(2)">Previous</button>
</div>
<div id="step3" class="form-step">
<!-- Step 3 Content -->
<h2>Step 3: Additional Information</h2>
<!-- Add your Entity Form for Step 3 -->
{{ entityform.name_of_your_entity_form_for_step_3 }}
<button onclick="submitForm()">Submit</button>
<button onclick="goToPreviousStep(3)">Previous</button>
</div>
</body>
</html>
Java Script:
function goToNextStep(currentStep, totalSteps) {
if (currentStep < totalSteps) {
var nextStep = currentStep + 1;
showStep(nextStep);
}
}
function goToPreviousStep(currentStep) {
if (currentStep > 1) {
var previousStep = currentStep - 1;
showStep(previousStep);
}
}
function showStep(stepNumber) {
// Hide all steps
for (var i = 1; i <= 3; i++) {
document.getElementById('step' + i).style.display = 'none';
}
// Show the current step
document.getElementById('step' + stepNumber).style.display = 'block';
}
function submitForm() {
// Collect data from all steps and submit to the server
// Implement your logic for data submission using AJAX or other methods
// ...
// You may redirect or show a success message after submission
// ...
}
Note:
Replace name_of_your_entity_form_for_step_1, name_of_your_entity_form_for_step_2, and name_of_your_entity_form_for_step_3 with the actual names of your entity forms.
/*************************************/
But Generally i recommend to follow this:
https://ulrikke.akerbak.com/2021/10/20/clickable-tabs-navigation-for-power-apps-portals/
This worked for me ,
Direct Multistep /Advance form wont work here
Basic form with Liquid code Looking like multi step Works.....
Regards
Surendran
You need to create separate basic form for each step and then use it , in one of my latest project we have done in same manner
@Surendran_R This solution is applicable for Basic Form only. What about Multi Step Form?
Hi @Dhruvin ,
For Clickable tabs , still now there is no Out-of-box feature.
Same scenerio we ahieved by using below blog
https://ulrikke.akerbak.com/2021/10/20/clickable-tabs-navigation-for-power-apps-portals/
Regards
Surendran_R
Can you please share some alternative methods to achieve this?
Not able to be done out of the box. Various people have tried to do things like click the Next with JS until they reach the Tab that was clicked - but is slow and will get screen flicker.
To do it, you basically need to build your own from the ground up.
Share
Report
All responses (
Answers (
