Custom Record Type Selection Lightning Component with force:createRecord event

Custom Record Type Selection Lightning Component with force:createRecord event

Lightning Component

Sharing is caring!

Hi Guys,

If you are thorough with lightning, you must have come across with force:createRecord event. NO? Don’t worry. We will discuss it here. 🙂

When you click on New button on any sObject [custom or standard] entity, It opens up a box (standard component) to create a record. If you want to leverage the same functionality in our custom components, you can use force:createRecord event.

Syntax of force:createRecord event:

How to use force:createRecord ?

sample component:

Open the Developer Console, Create a new lightning component with below code:

Lightning Component Code:

Controller:

This force:createRecord event is handled by the one.app container. It’s supported in Lightning Experience and Salesforce1 only. This event presents a standard page to create a record.

That’s it. This is the easiest way of creating a record in custom components on the fly. Because we do not have to waste time to build the component for form.
This concept is quite similar to standard lightning functionality. Salesforce has provided an ability of using it in our custom component. We fire a force:createRecord event using the above syntax and this event will be handled by one.app container then it calls standard component form to create a record.

What if your object has multiple record types ?
How to Make Custom Record Type Selection Available for Users in Custom Components With force:createRecord ?

For do that we need to do 3 thing in our lightning component :
1. Get the all available Record Types for that object.
2. Make them available as a list for selection on component.
3. Pass the selected recordTypeId as second parameter to force:createRecord.

That’ it.

The following example explains how to do this.

Custom Record Type Selection Lightning Component with force:createRecord event
Output:

Apex Controller [server side] : 

Note: There are some other ways of doing the same like getting the map of record type and Id and using it in the component. In this case we can avoid another server call. This post just to give an idea how you can do this.

Lightning Component :

Create Modal/Popup Box In Lightning Component – Salesforce

JavaScript Controller [client side]:

  • See Code Comments.
Add Above Component In Lightning  Experience Tabs To See The Output:
  • From setup >> Enter “tabs” in Quick Find box and select Tabs.
  • In the Lightning Component Tabs selection click on the new button.

Custom Record Type Selection Lightning Component add component to tabs

  • Next, select your lightning component from drop-down, Enter tab label select tab style icon and click on the next button and click on the save.

Custom Record Type Selection Lightning Component create new lightning component tabs

Now you can access your lightning component from App Launcher.

Custom Record Type Selection Lightning Component with force:createRecord event

Output : 

Custom Record Type Selection Lightning Component with force:createRecord event

Seems to be quite a lot ? Actually not. We just played with the things we learnt in our earlier posts.

Please note, SLDS Modal is not compatible with S1 mobile.

Hope it helps. Happy coding.!

Useful Resources:

Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference. ?

if you have any suggestions or issue with it, you can post in comment box 🙂

About The contributor: 

Sharing is caring!

(Visited 7,741 times, 57 visits today)

19 comments

    • I am changing this requirement to our requirement instead of account to case obj.
      “How to Make Custom Record Type Selection Available for Users in Custom Components With force:createRecord ?”
      As your requirement same as ours,but we did in case object i should get this error:

      This page has an error. You might just need to refresh it.
      Error in $A.getCallback() [Unable to get property ‘setParams’ of undefined or null reference]
      Callback failed: apex://HVHCRTIR_TicketCreationWithRecTypeCon/ACTION$getRecTypeId
      Failing descriptor: {markup://c:HVHCRTIR_TicketCreationWithRecTypeCom}

  • Hi Brahmaji,
    Do we have an event to handle “Successful Record Save” to perform any other custom actions.
    Event “force:recordSaveSuccess” is working for Component “force:recordEdit” but I could see no such component for creating record, I just found an event “force:createRecord”.

    • Hi Sriram,

      As per my knowledge, we do not have any such event supporting force:createRecord result. Also we cannot customize much in force:createRecord.

      Thanks
      Brahma

  • Trying to write a test class for the server side controller and having issues. Point me in the right direction?

  • Thanks for sharing such a great content. As winter 18 is rolled out and “e.force:createRecord” has stopped working in winter 18. Has anyone else also faced it.

  • Hi,

    thanks for the awesome tutorial – I did follow your example and tried to save the new object, but I get an error like that:

    ==> Record Type ID: this ID value isn’t valid for the user: 0129E0000000sYZQAY

    The ID is the one from the RecordType and I’ve no change to change it’s value (like shorten it, suggested on other websites while googling this topic). It still appears in full length and just disappears if I don’t set this value completely.

    In this case (without the ID) it also works with saving the item.

    Do you have any ideas for that?

    Thanks for your help!

    Best,

    Martin

  • Hi,

    I am trying to create something like this. and i want to populate default values from another object here. e.g. i am adding this component as a quick action on my case record page and i want to pass some of case fields value in new form of my custom object. so how can we do that here?

     

    Thanks

    Neeru

  • Hi,

    great work. Could you please tell me how to hide save & new button which redirects the user back to standard record type selection page.

    Thanks,
    Nithin

  • Hi,

    Great Work !!!.

    Could you please tell me how to hide Save & New button which is redirecting user to back to standard record type selection page.

    Thanks,

    Nithin C.H

  • Great post, really helped out with showing how to create records within Lightning. I am bypassing the modal selection of the recordType and using the controller to get a recordType based on additional criteria. I made the component a quick action, take a record id of a project, and get a task record type id back and then run the createRecord method. Three questions:

    How can we add some values to the record after the createRecordEvent.fire() method, like RelatedTo
    Is it possible to keep user on the original page rather than go to the newly created record
    How can we close the pop-up from the forceRecord form if we hit cancel; image link

    Thanks again for the post!

  • Hi Bramaji,

    I have used above code for Leads Object and overridden standard ‘New’ button.

    Once I create a Lead I will be redirected to Lead Detail page.

    But the problem is when I retry to create a New Lead(by clicking on New button). I get a pre filled data of the Lead which I created previously. Ideally it should land to Record type selection page.

    Could you please suggest what can be done here.

  • May i know how to populate standard lookup field like account on contact page. I used above approach, everything is working fine except lookup field on standard lookup field not pre populating

Leave a Reply