Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ethanoneethanone 

lwc action buttons to open modal

I've got a custom request object and I'd like to create an action button with LWC that prompts the user to add a note and a file then posts the note and file to the chatter feed and changes the status of the record. I do not want to use Aura if possible. I'm not sure how to open a modal from an action button (something like the below) 
<lightning-button label="Submit" slot="actions" onclick={handleSubmitClick}></lightning-button>
I'm not sure how to add an entry to the feed. Is this even possible with LWC?

Lastly, I'm not sure how to modify the record without using the lightning-record-form. Is Apex method the only option?
 
Jon-FreedJon-Freed

You asked:

  1. "[i]s [having "an action button with LWC"] even possible with LWC?"  Not directly.  Currently, you are limited to having an action invoke a Lightning [Aura] Component that, in turn, invokes an LWC.  I have provided more details below.
  2. "[i]s ["add[ing] an entry to the feed"] even possible with LWC?"  Try creating a FeedItem record through Lightning Data Service, perhaps through a Lightning Data Service wire adapter. See
  3. "how [can I] modify the record without using the lightning-record-form[; i]s Apex method the only option?"  By "record", I think you're referring to a record in your custom request object.  Try using the aforementioned Lightning Data Service and a Lighting Data Service wire adapter, particularly the updateRecord method.  See https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_update_record.


More details regarding #1, action button for an LWC:  Per https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.get_started_supported_experiences:

Lightning Web Components [do not] currently support these Salesforce experiences and tools. To use a Lightning web component with these experiences and tools, wrap the component in an Aura component.
...
Standard Action Overrides, Custom Actions, Global Actions, List View Actions, Related List View Actions

However, your Lightning [Aura] component can be very lightweight.  It does not need much more than the following:

<aura:component
    implements="
        flexipage:availableForRecordHome,
        force:lightningQuickActionWithoutHeader,
        force:hasRecordId,
        force:hasSObjectName
    "
>
    <c:myLwcForAnAction
        objectApiName="{!v.objectApiName}" 
        recordId="{!v.recordId}" 
    />
</aura:component>

In this paradigm, the actual GUI layout for a popup modal leaves much to be desired.  You may need to do quite a lot of tweaking the css and interplay between the Lightning [Aura] Component and your "myLwcForAnAction" Lightning Web Component to get the look and feel that you desire.