How to use the Salesforce Lightning Component for NWC Forms

  • 15 December 2020
  • 4 replies
  • 159 views
K
Userlevel 2
Badge +4

As some of you might know, we've recently deprecated the Nintex Workflow for Salesforce app, and that took away the ability to embed an NWC form directly into your Salesforce Lightning page layouts. To address this, we put together a new tool that will allow you to embed your forms as before, and submit them with the context (in this case, Record Id), of the record the form was submitted on. 

 

Here's how to use it:

First, download the package from gallery.nintex.com, under the "Tools" section.

9713i2D0D32BC42DA32AB.png

Once you have the zip file, unzip, and you'll discover 2 different files. One is a component, and one is a design file. Next, you'll want to open up the developer console in your Salesforce Organization. Hit "New", and select "Lightning Component". You're going to then get a prompt that asks you to name the component. Give the component a name that you and your teammates will understand, and hit "Submit"

9714i0ED29ECB323EC28A.png

It should automatically open a file that has an extension of ".cmp". This is the component piece of the Lightning Component Bundle. Open up the Component file you downloaded from the gallery, and copy and replace the contents into this new ".cmp" file. Save the file with Control +S or File > Save.

9716iE151D1C464ACAB24.png

 

On the right hand side, you'll also see a menu with "Component" highlighted. Click on the "Design" item from this menu. Once you do, a new file will open. This is the design file. Again, you will navigate to the Design file you downloaded from the gallery. Copy and replace with the contents from that file. 

9717iD0FECFB821C6C6AC.png

Hit Control +S on your keyboard, or Click on File > Save once you've finished this step.

 

Now, your component will be available for you to use! Go to any Salesforce record you'd like to add an NWC form to, and click on the gear box on the top right, and click "Edit Page". You'll be immediately taken to the Lightning App Builder. From there, scroll down on the left hand panel, and you'll see your component listed there under the "Custom" section. Drag and drop it wherever you'd like on the page.

9718i292F91B9289B0C5E.png

It will then prompt you for a form URL. This is when you will want to copy and paste the form URL from NWC. In addition to the URL, you will have 3 other options. The height and width control the look of the form.

 

The "Record ID Parameter Name", on the other hand, is going to control sending back the ID of the current record to NWC. To set this up, inside of your NWC form, create a variable using the getQueryStringParameter() function. Inside of the function, you will declare the Record Id Parameter Name.

9719i00C9A19852D2744A.png

Copy the value you added inside of the formula, and paste this into the configuration menu for the Lightning Component. Once that is completed, you can save, and your form will be ready to go!

 

Again, to reiterate, the purpose of this component is to let you add your NWC forms directly to your Salesforce page layouts. From there, you can now submit the form, and continue on with your workflow! Happy designing!

 

 

4 replies

V

@katie_chu Can I use this framework to pass the current user back to the form? I was hoping to add it to the data received form as such:


{
"se_form_variables": {
"se_record_id_JCG89cd9tZ_record_id_ur4gUzfmAf": "record id",
"user": "0053J000001VwqoQAC",
"se_yes_no_1_wYdfLxcLsH": true
}
}

But adding the user Id to the src string doesn't work. This is what comes back in Nintex:


{
"se_form_variables": {
"se_record_id_JCG89cd9tZ_record_id_ur4gUzfmAf": "0693J000000goqGQAQuser=0053J000001VwqoQAC",
"se_yes_no_1_wYdfLxcLsH": true
}
}

Any thoughts?

K
Userlevel 2
Badge +4

@vboyleQR You absolutely can. You can add as many variables as you want. What you'd need to do is add more parameters to the component, and add more variables to the workflow start form as well.


 


Just like the way I added the Record Id above as a form variable, you'd add one for each additional data point you want to bring back. Ensure that the parameter name matches whatever you will add to the URL. Then, you'd add the parameters in the URL as it seems you attempted to do above (i.e. "User=0053J000001VwqoQAC").

V

Yes I had gotten it working and meant to post the code, getting the syntax right in the URL was the issue. Just posting here in case anyone else is looking to do the same with user Id.


aura component:


 


<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global">
<aura:attribute name="userId" type="String" />
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<aura:attribute name="userIdParam" type="String" default="user"/>
<aura:attribute name="recordId" type="String" />
<aura:attribute name="recordIdParam" type="string" default="id"/>
<aura:attribute name="formURL" type="string"/>
<aura:attribute name="width" type="string" default="100%"/>
<aura:attribute name="height" type="string" default="400"/>
<iframe src="{! v.formURL + '?' + v.recordIdParam + '='+ v.recordId + '&amp;'+ v.userIdParam + '=' + v.userId}"
width="{!v.width}"
height="{!v.height}"
scrolling="auto"/>
</aura:component>

 


js controller:


 


({
init : function(component, event, helper) {
var userId = $A.get("$SObjectType.CurrentUser.Id");
component.set("v.userId", userId);
}
})

 


 Thanks!

V

Hi Katie, one additional question, is there an event the parent lightning component can listen for when the user submits a form through the iframe? I would like to fire some salesforce processes when a user submits the form.

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings