[SalesForce] Salesforce communities – Providing an edit button on lightning component on case detail page

Im working on the napili community builder template and looking to add a few custom lightning components.

In particular for the case detail page I want to replace the std record banner component (first image below) with a custom lightning component that fulfils some of the same functionality but empahsises a few differnet fields and has a few custom buttons.

What I want to have on my custom banner is an edit button which works the same as the edit button on the standard record banner. Ie displays the record in edit mode in a modal. As can be seen from the screenshots above Ive got as far as making my coponent aware of the record detail page its on but I dont know how to form the URL to open the record in edit mode in the community. Easy to do in regular non-communities Salesforce but no idea what to do here.

Any help around the URL I need to edit the record much appreciated. (sure this mut have been asked but cant seem to find it)

Component

<aura:component implements="forceCommunity:availableForAllPageTypes,force:hasRecordId" access="global" controller='LCCaseDetailContApex'>
<ltng:require styles="/resource/SLDS203/assets/styles/salesforce-lightning-design-system-ltng.css" />
<aura:attribute name="debugString" type="String" default="Not Set" />
<aura:attribute name="borderColour" type="String" default="grey"/>
<aura:attribute name="record" type="Case"/>
<aura:attribute name="caseID" type="String" required="true"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<div class="CaseControls">
    <div class="slds-page-header" role="banner">
        <div class="slds-grid slds-grid--vertical-stretch">
            <div>
                <p class="slds-text-heading--label">Case {!v.record.CaseNumber} - {!v.record.Subject }</p>
                <h1 class="slds-text-heading--medium">Currently allocated to {!v.record.Allocated_To__c}</h1>
            </div>
            <div class="slds-col--bump-left">
                    <ui:button aura:id="button" label="Show Guidance" press="{!c.doGuidance}"/>
                    <ui:button aura:id="button" label="Edit Case" press="{!c.edit}"/>
                    <ui:button aura:id="button" label="Submit Case" press="{!c.doSubmit}"/>
                    <ui:button aura:id="button" label="Withdraw Case" press="{!c.doWithdraw}"/> 
            </div>
        </div>            
    </div>
</div>

Best Answer

Use the force:recordEdit component

Generates an editable view of the specified Salesforce record.

A force:recordEdit component represents the record edit UI for the specified recordId. This example displays the record edit UI and a button, which when pressed saves the record.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_force_recordEdit.htm

You may have to use it in combination with a modal window as I am not sure the component generates the modal on its own or opens in a new window

Related Solutions

[SalesForce] How to pass a function as a Lightning component attribute

The solution is to declare an event instead of an attribute when you want to provide a callback. Below is myButton.cmp rewritten to use events.

pressEvent.evt

<aura:event type="COMPONENT" />

myButton.cmp

<aura:component>
    <aura:attribute name="label" required="true" type="String" />
    <aura:attribute name="class" required="false" type="String" />

    <!-- Declare an "instance" of pressEvent -->
    <aura:registerEvent name="press" type="c:pressEvent"/>

    <input type="button" value="{!v.label}" class="{!v.class}" onclick="{!c.onClick}" />
</aura:component>

myButtonController.js

({
    onClick : function(component, event, helper) {
        helper.trackButtonClick(component, event);

        var event = component.getEvent('press');
        event.fire();
    }
})

This wasn't clear from the documentation, but there are two ways to handle an event. The first is to use the <aura:handler /> markup. To handle the press event of myButton, you could do this:

<aura:handler name="press" event="c:pressEvent" action="{!c.onOk}"/>

I would avoid this approach because if you have more than one button, the press event for all of them would be handled by the same action c.onOk.

The second way to handle an event is to pass a callback as an attribute in the <c:myButton /> markup. I didn't see this in the Salesforce docs but found it in an unrelated question. This is exactly what I needed. Each instance of myButton gets a unique callback.

myButtonConsumer.cmp

<aura:component>
    <!-- No aura:handler necessary. Just pass the callback as an attribute -->
    <!--<aura:handler name="press" event="c:pressEvent" action="{!c.onOk}"/>-->

    <c:myButton label="OK" class="slds-button" press="{!c.onOk}" />
    <c:myButton label="Cancel" class="slds-button" press="{!c.onCancel}" />
</aura:component>

myButtonConsumerController.js

({
    onOk: function(component, event) {
        alert('OK pressed!');
    },

    onCancel: function(component, event) {
        alert('Cancel pressed!');
    }
})

[SalesForce] Can “Follow,edit and delete” in record banner of case detail page be hidden using CSS

You need to remove those from the Salesforce1 Actions on the Page Layout. That will get rid of them for ya.

Via CSS you can remove the follow by plugging this into the Custom CSS in the branding editor:

.not-selected{ visibility: hidden }

Best Answer

Related Solutions

[SalesForce] How to pass a function as a Lightning component attribute

[SalesForce] Can “Follow,edit and delete” in record banner of case detail page be hidden using CSS

Related Topic