Objective:
After reading this article, you will understand how to make use of Youreka Lightning Component code to create dynamic form buttons
Before you get started:
These articles might be helpful before you read this one:
Out of the box Youreka Lightning Components are extremely powerful. However not all use cases and implementations are made equal and sometimes the power of Salesforce needs to be leveraged to accomplish a more robust solution to a problem.
When deploying Youreka’s existing Lightning Components, The New Form Button component allows an administrator to specify a Form Template to be used when creating Forms from that button in the desktop interface. Organizations commonly (or indeed should) have a Form Template versioning strategy in place. Such a strategy generally ensures all Forms that are created are created from the most recent and up to date version of a Form Template.
However upon versioning a Form Template the current New Form Button Lightning Component will not automatically reference the most up to date version of a Form Template for a New Form Button. Which means each time a new version of a Form Template is created, an administrator needs to remember to change all existing New Form Button components right after this version is published. If this isn’t done then new Forms could be generated from older Form Template versions or user errors may occur.
The following solution is basic, but serves as a guide to thinking about how to overcome this issue. The contents of this article is intended for experienced Salesforce Architects and Developer audiences. Sample component code is provided but could be extrapolated to fit most use cases where organizations use such buttons and have a Form template Versioning strategy in place.
The Use Case
AccSoft is a company that sells accounting software to businesses and individuals. They take sales calls from various call centers with these business owners and individuals to sell their products. Sales personnel are guided through their conversations using dynamic Youreka Forms. They already use Youreka components and customized record pages in Salesforce when doing their functions but sometimes find that they see errors in creating Youreka Forms using these components at the end of each quarter. It’s at this time Form Template Builders are releasing new Form Templates for use to include new questions on Forms as the business needs and competitor landscape shift.
To solve this issue the developers at AccSoft need to create a dynamic Lightning Component that uses Youreka Aura Component code to create new Forms whilst always ensuring the newest version of a Form Template is referenced.
To begin with there is an existing process to take account of that will be weaved into this solution. This being that Form Template Families have been set up to always serve up the newest version of a Form Template's Id for reference in automation. The Form_Template_Family__c object (which is a custom object) will be queried in the component controller class for the relevant Form Template version Id and used in Form creation.
The developers need to write their component controller class to also query an opportunity ‘on click’ of the component button and retrieve record details (in this example it's just the Opportunity record Id and AccountId as this Form Template references these records in Field Links on Forms generated from this Form Template).
The following example shows the apex class that could be used to query the necessary data needed for this Form Templates Form to be created:
Form Template Name: Sales Script
Form Template Family Name: Sales
Field Links: Opportunity and Account
Component Controller GetSalesFormDetails.cls
public with sharing class GetSalesFormDetails {
@AuraEnabled(cacheable=true)
public static Opportunity getReqFormData(String recordId) {
return [SELECT Id, AccountId FROM Opportunity WHERE Id = :recordId];
}
@AuraEnabled(cacheable=true)
public static Form_Template_Family__c getReqFormTemp() {
return [SELECT Production_Template__c FROM Form_Template_Family__c WHERE Name LIKE 'Sales' LIMIT 1];
}
}
Component Controller Test GetSalesFormDetailsTest.cls
@isTest
public class GetSalesFormDetailsTest {
@isTest
static void testGetReqFormData() {
// Create a test Account
Account testAccount = new Account(
Name = 'Test Account'
// Add other required fields for the Account
);
insert testAccount;
// Create a test Opportunity and set its AccountId
Opportunity testOpportunity = new Opportunity(
Name = 'Test Opportunity',
StageName = 'Prospecting',
CloseDate = Date.today(),
AccountId = testAccount.Id
// Add other required fields for the Opportunity
);
insert testOpportunity;
// Call the getReqFormData method
Opportunity result = GetSalesFormDetails.getReqFormData(testOpportunity.Id);
// Verify that the result is not null
System.assertNotEquals(null, result);
// Add more specific assertions as needed
}
@isTest
static void testGetReqFormTemp() {
// Create a test disco__Form_Template__c record
disco__Form_Template__c testFormTemplate = new disco__Form_Template__c(
Name = 'Sales V1',
disco__Status__c = 'In Use'
);
insert testFormTemplate;
// Create a test Form_Template_Family__c record
Form_Template_Family__c testFormTemplateFamily = new Form_Template_Family__c(
Name = 'Sales', // This should match your query
Production_Template__c = testFormTemplate.Id
// Add other required fields
);
insert testFormTemplateFamily;
// Call the getReqFormTemp method
Form_Template_Family__c result = GetSalesFormDetails.getReqFormTemp();
// Verify that the result is not null
System.assertNotEquals(null, result);
// Add more specific assertions as needed
}
}
This class is retrieving 2 things:
- The Opportunity record Id from the Opportunity this future button will be clicked from and its related Account Id
- The most up to date Sales Form Template Id retrieved from the ‘Sales’ Form Template Family (or if extrapolating the location where this Id is stored in Salesforce)
Creating the Custom Lightning Component to create Forms from an Opportunity record
First step here is to create the component. Head to the developer console in Salesforce and select File -> New -> Lightning Component. Call the component whatever you like; in our example it’s called CustomForm. Then click Submit. The following code block for the .cmp file is what we are using, but feel free to change it as your use case requires.
CustomForm.cmp
<aura:component controller="GetSalesFormDetails" implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<disco:auraPubsub aura:id="auraPubsub" />
<aura:attribute name="action1Data" type="Object" />
<aura:attribute name="action2Data" type="Object" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div style="text-align: center;">
<lightning:button label="Create Form Custom LWC" onclick="{!c.CreateForm3}" class="my-button-class"/>
</div>
</aura:component>
To explain the code above, we will break it down into segments
Segment 1:
<aura:component controller="GetSalesFormDetails" implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
This block of code sets up the component for use. It specifies the controller with the .cls name, tells Salesforce where the button is allowed to be used and fetches the recordId from the record the button is placed on. It also assigns the button global access meaning our sales users in Salesforce can access it.
Segment 2:
<disco:auraPubsub aura:id="auraPubsub" />
This block gives us access to the Youreka Lightning Component functions that help us create our Forms from clicking a custom Lightning Component button
Segment 3:
<aura:attribute name="action1Data" type="Object" />
<aura:attribute name="action2Data" type="Object" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div style="text-align: center;">
<lightning:button label="Create Form Custom LWC" onclick="{!c.CreateForm3}" class="my-button-class"/>
</div>
</aura:component>
This last block creates the button for use but also includes a reference to the results received through the queries stated in controller class. The block also references the handler of the event that initiates data retrieval. Lastly the button fires an ‘onclick’ event for the .js file (following) to run the process that creates Forms from this button. It’s important to note that you can add custom styling to the button too! For more information on styling components see here.
CustomFormController.js
The below markup is the Javascript file used in the CustomForm Lightning Component
({
doInit: function(component, event, helper) {
var recordId = component.get("v.recordId");
// Call action1 to get Account and Opportunity data
var action1 = component.get("c.getReqFormData");
action1.setParams({ "recordId": recordId });
action1.setCallback(this, function(response) {
var state1 = response.getState();
if (state1 === "SUCCESS") {
component.set("v.action1Data", response.getReturnValue());
}
});
$A.enqueueAction(action1);
// Call action2 to get Form Template data
var action2 = component.get("c.getReqFormTemp");
action2.setParams({ "string1": "Sales" });
action2.setCallback(this, function(response) {
var state2 = response.getState();
if (state2 === "SUCCESS") {
component.set("v.action2Data", response.getReturnValue());
}
});
$A.enqueueAction(action2);
},
CreateForm3: function(component, event, helper) {
// Access data from action1 and action2 via component attributes
var Data1 = component.get("v.action1Data");
var Data2 = component.get("v.action2Data");
var auraPubsub = component.find('auraPubsub');
var payload = {
"disco__Form_Template__c": Data2.Production_Template__c,
"disco__Form_Opportunity__c": Data1.Id,
"disco__Form_Account__c": Data1.AccountId
};
if (auraPubsub) {
// Define the event handler
auraPubsub.addHandler('createNewYForm', this, function(event) {
var newFormId = event.getParam('Id');
console.log('New Form ID:', newFormId);
// Use the newFormId for further processing or redirection
var siteURL = "https://ylms.lightning.force.com/lightning/r/disco__Form__c/";
var view = "/view";
var redirectURL = siteURL + newFormId + view;
window.location.href = redirectURL; // Redirect after processing the event
});
// Fire the event
auraPubsub.fireEvent('createNewYForm', payload);
} else {
console.log('error');
}
}
})
Everything in blue text is the event that handles Form creation and subsequently displaying the Form back to the user after the button is clicked. It takes the following parameter values in the payload object.
var payload = {
"disco__Form_Template__c": Data2.Production_Template__c,
"disco__Form_Opportunity__c": Data1.Id,
"disco__Form_Account__c": Data1.AccountId
};
It then inserts this object into the createNewYForm method being called if the auraPubsub attribute is included in the .cmp markup (which in this case it is).
auraPubsub.fireEvent('createNewYForm', payload);
Finally, the Form needs to be instantly available to the user that clicked the button. We are achieving this by building a URL in the code. This URL takes the site URL and adds the newly created Form Id to it. Then the user notices it available in the Youreka Form Component to be filled in.
// Use the newFormId for further processing or redirection
var siteURL = "https://ylms.lightning.force.com/lightning/r/discon__Form__c/";
var view = "/view";
var redirectURL = siteURL + newFormId + view;
window.location.href = redirectURL; // Redirect after processing the event
});
The following video shows this happening, and also shows how the button needs no further configuration upon a Form Template versioning change.
Considerations
- This document is intended to serve as an example of implementing a custom Lightning Component that extends Youreka functionality. This example is not supported application functionality and thus we can not guarantee that it will work for every interpretation of it.
- This example assumes a Form Template Versioning process exists. Please see here to find out more on what that entails
- If after versioning new Field Links are added to a Form Template, this will need to be accounted for in the controlling class and payload object.
- This solution assumes that users are using the Youreka Form Component on the same record as the button to view newly created Forms
Comments
0 comments
Please sign in to leave a comment.