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

Question

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:

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

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.

Question

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?

Did you find any way out for creating New Notes properly in Lightning? — VarunC
– VarunC, Commented Dec 1, 2017 at 14:42
@UweHeim nothing new on this i imagine? I tried using force:editRecord w an existing note and got the same as the screenshot above. the only thing i've gotten to work (for editing an existing note) is pure ugliness : window.open("hotpotato-dev-ed.lightning.force.com" + noteId); — gorav
– gorav, Commented Apr 19, 2018 at 16:19

sanket kumar · Accepted Answer · 2018-09-11 20:43:00Z

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:-

Here is my code:-

<--component-->

<aura:component controller="CreateNoteRecord" implements="lightning:actionOverride,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickActionWithoutHeader" 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}"> X <span class="slds-assistive-text">Close</span> </button> <h2 id="header99" class="slds-text-heading--medium">Creating Custom Note</h2> </div> <div class="slds-modal__content slds-p-around--medium"> <div class="slds-page-header"> <div class="slds-media"> <div class="slds-media__body"> <center> <h1 class="slds-page-header__title slds-truncate slds-align-middle" title="Requests User Guides">New Note</h1> </center> </div> </div> </div> <b>Title:</b> <br/> <ui:inputText class="form-control" value="{!v.note.Title}"/> <br/> <b>Content:</b> <br/> <lightning:inputRichText value="{!v.note.Content}" placeholder="Type something interesting"/> <br/> <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> </div> </div> </div> </div> </div> </div> </aura:component>

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 action.setParams({ nt : candidate, PrentId : component.get("v.recordId") }); //Setting the Callback action.setCallback(this,function(a){ //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 component.set("v.note",newCandidate); } else if(state == "ERROR"){ alert('Error in calling server side action'); } }); var navEvt = $A.get("e.force:navigateToSObject"); navEvt.setParams({ "recordId": component.get("v.recordId"), "slideDevName": "detail" }); navEvt.fire(); $A.get('e.force:refreshView').fire(); //adds the server-side action to the queue $A.enqueueAction(action); }, closeModel : function (component, event, helper) { var navEvt = $A.get("e.force:navigateToSObject"); navEvt.setParams({ "recordId": component.get("v.recordId"), "slideDevName": "detail" }); navEvt.fire(); } })

css:-

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

APEX Controller:-

public with sharing class CreateNoteRecord { @AuraEnabled public static void createRecord (ContentNote nt, id PrentId){ try{ if(nt != null){ insert nt; ContentDocument cd=[select id from ContentDocument where id=:nt.Id]; ContentDocumentLink cdl=new ContentDocumentLink(); cdl.ContentDocumentId=cd.id; cdl.LinkedEntityId=PrentId; cdl.ShareType='V'; cdl.Visibility='AllUsers'; 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.

@UweHeim WelCome :) But it still needs more modification to make it as much powerful as standard one in terms of functionality — sanket kumar
– sanket kumar, Commented Sep 12, 2018 at 12:03
nice posts sanket. quick find box ->note settings ->enable note before using this code otherwise content type will gives invalid type error — Annappa PH
– Annappa PH, Commented Mar 3, 2020 at 16:34

Stack Exchange Network

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

1 Answer 1

You must log in to answer this question.

Hot Network Questions