Step Form Applications
Step Form Applications allow users to navigate through multiple forms sequentially, presenting different content and capturing user input at each step. This approach is useful for scenarios like customer onboarding or multi-step transactions. Users can interact with forms and receive dynamic feedback based on their inputs. The integration of step forms can be easily triggered through a ribbon button within the application.
How to use Step Form Applications?
- Create the Step Form Structure in Webresource:
- Define the HTML structure for the step forms, which includes static containers for displaying different steps and input fields as needed.
- Use JavaScript to manage the flow of steps and handle user interactions.
- Handle style as needed
- Step 1: Welcome Message
- Step 2: Check for Existing Customer
- Step 3: Create New Customer (If Not Found)
- Step 4: Customer Creation Confirmation
- Step 5: Welcome to Create Transactions
- Step 6: Create Transaction for Customer
- Transaction Creation Confirmation
- The user is welcomed and prompted to enter a customer phone number.
-
The application checks if the customer exists.
- If found, the user proceeds to the transaction creation welcome step.
- If not found, the user is directed to create a new customer.
- After creating the customer, a confirmation is shown, followed by a welcome to the transaction creation step.
- The user fills out the transaction form and submits it, followed by another confirmation message.
-
Accessing the Step Form Application:
- Navigate to the Step Form Application section in the UI.
- Click on Add New to create a new step form app.
-
Creating a New Step Form Application:
-
Select the Web Resource:
- In the Content HTML field, select the web resource that you previously created for your step form. This web resource should contain the HTML and JavaScript necessary to render the step form interface.
- Make sure that the web resource is designed to handle multiple steps and can dynamically display the required content based on user interactions.
- Name: Enter a meaningful Name for the step form application.
-
Select the Web Resource:
-
Integrating with Ribbon Button:
- Create a ribbon button that opens the step form application in a popup window. This allows users to start the multi-step form process from various areas within the application.
- Create a ribbon button that opens the step form application in a popup window. This allows users to start the multi-step form process from various areas within the application.
- Example function to open the step form:
Example:
Scenario: Customer Onboarding and Transaction Creation
Flow Summary:
<div class="col-10" id="form" style="max-height:100%"></div>
<div class="staticContainer" id="welcome" style="display: none">
<div class="card form-group">
<label for="customerId">Customer phone number</label>
<input
type="text"
class="form-control"
id="customerId"
placeholder="Type here Customer phonenumber..."/>
</div>
</div>
<div class="staticContainer" id="finishCustomer" style="display: none">
<div class="h1">Successfully customer Created.</div>
</div>
<div class="staticContainer" id="welcome-trans" style="display: none">
<div class="h1">Welcome to create transactions</div>
</div>
<div class="staticContainer" id="finish-trans" style="display: none">
<div class="h1">Successfully transaction Created.</div>
</div>
<div>
<div
class="d-flex flex-row justify-content-end ms-auto pb-3"
style="width: 20rem"
>
<button
class="btn btn-primary"
type="button"
id="prevTabBtn"
style="display: none"
>
Previous
</button>
<button
class="btn btn-primary ms-5"
type="button"
id="nextTabBtn"
style="display: none"
>
Next
</button>
</div>
</div>
<script type="module">
import StaticContentStep from "../../js/StepFormApp/StaticContentStep.js";
import CustomFormStep from "../../js/StepFormApp/CustomFormStep.js";
import StepFormApp from "../../js/StepFormApp/StepFormApp.js";
async function isEntityRecordExist(
entityId,
entityName,
primaryKeyFieldName,
recordId
) {
let queryExpression = new QueryExpression(entityName);
queryExpression.Criteria.AddCondition(
new ConditionExpression(
entityName,
primaryKeyFieldName,
ConditionOperator.EQUAL,
recordId
)
);
queryExpression.AddColumn(primaryKeyFieldName, AggregateType.COUNT);
queryExpression.Columns.AddColumns(`${entityName}Id`);
queryExpression.Columns.AddColumns(`new_name`);
queryExpression.AddGroupBy();
let view = queryExpression.GenerateView("temp");
console.log(view);
let body = { filter: null, viewJson: view.viewAsJson };
let response = await fetch(
`/api/EntityViews/GetViewWithfilter?entityId=${entityId}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(body),
}
);
let data = await response.json();
if (data["data"].length > 0) {
let count = data["data"][0][`count ${primaryKeyFieldName}`];
if (count == 1) {
return data["data"][0];
}
}
return false;
}
let nextBtnElm = document.getElementById("nextTabBtn");
let formContainer = document.getElementById("form");
let customerIdInputElm = document.getElementById("customerId");
let stepFromApp = new StepFormApp(nextBtnElm);
let step1 = new StaticContentStep(formContainer, "welcome");
stepFromApp.Step = step1;
let step2 = new CustomFormStep(
formContainer,
`aaf7f9ff-a694-409c-bdd2-69ffdcdd2deb`
);
let step3 = new StaticContentStep(formContainer, `finishCustomer`);
let step4 = new StaticContentStep(formContainer, "welcome-trans");
let step5 = new CustomFormStep(
formContainer,
`95e6a233-b326-4247-b18d-566debbe699a`
);
let step6 = new StaticContentStep(formContainer, `finish-trans`);
customerIdInputElm?.addEventListener("blur", async (e) => {
let recordIdValue = e.target.value;
if (recordIdValue.trim().length == 0) {
return;
}
debugger;
console.log("recordIdValue", recordIdValue);
let customer = await isEntityRecordExist(
"aaf7f9ff-a694-409c-bdd2-69ffdcdd2deb",
"customers",
"phonenumber",
recordIdValue
);
if (customer) {
step5.MappingData = {
customer: {
id: customer["customersId"],
new_name: customer["new_name"],
entityId: "aaf7f9ff-a694-409c-bdd2-69ffdcdd2deb",
entityName: "customers",
},
};
step1.Next = step4;
step4.Next = step5;
step5.Next = step6;
} else {
step1.Next = step2;
step2.Next = step3;
step3.Next = step4;
step4.Next = step5;
step5.Next = step6;
}
});
stepFromApp.initialize();
</script>
<style>
.staticContainer {
align-items: center;
justify-content: center;
height: 80vh;
margin: 0;
}
.card {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: left;
width: 30rem;
}
.staticContainer label {
display: block;
margin-bottom: 8px;
}
.staticContainer input {
width: 100%;
padding: 10px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
}
</style>
<script>
function openPopupWindow(url, title, w, h) {
var left = screen.width / 2 - w / 2;
var top = screen.height / 2 - h / 2;
return window.open(url,title,"width=" + w + ", height=" + h + ", top=" + top + ", left=" + left);
}
function openCreateCustomerFormStep() {
openPopupWindow(
`/formbuilder/stepformapp?stepformId=your-stepform-id`,
'',
1000,
700
);
}</script>