Lightning Components: how to invoke “New Note” panel from custom components?

On the Standard-Related-List “Notes” there is a New Button. This New Button opens a Panel on the bottom of the screen like this:

enter image description here

How can I invoke the opening of this “New Note” Panel? I’ve tried so far (from Visualforce-context)'ContentNote',null,{Title:"test"}); which should pretty much be similar to $A.get("e.force:createRecord"); but unfortunately, this only looks very poor:

enter image description here

It is important to say, that there is no field on ContentNote which allows to link the note to the parent object. This is missing, because one ContentNote can relate to many parent SObject, so it is an m:n Relationship, hence a Junction Object is used in the data model called ContentDocumentLink. I suppose this is one of the reasons, why createRecord is doing so bad for the ContentNote entity.


Is there any way to make it better in order to create new notes in my own components and visualforce pages? Or do I have to write my Notes editor from the scratch?


I have Created one custom component which can be used as a quick action and it enables you to create the note related to the current record.

Look what I have done:-

enter image description here

Here is my code:-


<aura:component controller="CreateNoteRecord" 
                access="global" >
    <!-- Define Attribute-->
    <aura:attribute name="note" type="ContentNote" default="{'sobjectType': 'ContentNote','Title': '','Content': ''}"/>

    <div class="slds-m-around--xx-large">
        <div role="dialog" tabindex="-1" aria-labelledby="header99" class="slds-modal slds-fade-in-open ">
            <div class="slds-modal__container">
                <div class="slds-modal__header">
                    <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeModel}">
                        <span class="slds-assistive-text">Close</span>
                    <h2 id="header99" class="slds-text-heading--medium">Creating Custom Note</h2>
                <div class="slds-modal__content slds-p-around--medium">
                    <div class="slds-page-header">
                        <div class="slds-media">
                            <div class="slds-media__body">
                                    <h1 class="slds-page-header__title slds-truncate slds-align-middle" title="Requests User Guides">New Note</h1>
                    <ui:inputText class="form-control" value="{!v.note.Title}"/>
                    <lightning:inputRichText value="{!v.note.Content}" placeholder="Type something interesting"/>
                    <div class="slds-modal__footer">
                        <div class="col-md-4 text-center">
                            <ui:button class="btn btn-default" press="{!c.create}">Create</ui:button>
                             <ui:button class="btn btn-default" press="{!c.closeModel}">Cancel</ui:button>

JavaScript Controller:-

    create : function(component, event, helper) {
        //getting the candidate information
        var candidate = component.get("v.note");
        //Calling the Apex Function
        var action = component.get("c.createRecord");
        //Setting the Apex Parameter
            nt : candidate,
            PrentId : component.get("v.recordId")
        //Setting the Callback
            //get the response state
            var state = a.getState();
            //check if result is successfull
            if(state == "SUCCESS"){
                //Reset Form
                var newCandidate = {'sobjectType': 'ContentNote',
                                    'Title': '',
                                    'Content': ''
                //resetting the Values in the form
            } else if(state == "ERROR"){
                alert('Error in calling server side action');
        var navEvt = $A.get("e.force:navigateToSObject");
            "recordId": component.get("v.recordId"),
            "slideDevName": "detail"
        //adds the server-side action to the queue        
    closeModel : function (component, event, helper) {
        var navEvt = $A.get("e.force:navigateToSObject");
            "recordId": component.get("v.recordId"),
            "slideDevName": "detail"


.THIS .slds-modal__container{
       max-width: 50rem !important;
       width:100% !important;


APEX Controller:-

public with sharing class CreateNoteRecord {
    public static void createRecord (ContentNote nt, id PrentId){
            if(nt != null){
                insert nt;
                ContentDocument cd=[select id from ContentDocument where id=:nt.Id];
                ContentDocumentLink cdl=new ContentDocumentLink();
                insert cdl;
        } catch (Exception ex){


Once the note is getting created, I am inserting the ContentDocumentLink object to link the current record to this note.

Hope it helps you.

Source : Link , Question Author : Uwe Heim , Answer Author : sanket kumar

Leave a Comment