Looking for Lightning Alternative for Javascript Detail Page Toggle Button

Question

In classic we could use a custom button with some JS to create a simple toggle functionality.

Cf. Javascript Detail Page Toggle Button

What would be a valid lightning experience alternative (programmatic / declarative)

I have tried the Record Update Quick Action which works - yet it is 300% more clicks than a simple toggle button.

Basically I want the behaviour of the quick record update action (toast message, field value gets updated on lightning page) without the hassle of doing more than 1 click

Answer 1

It takes a fair amount of work to do almost anything in Lightning, so here's a basic framework to get you started. Note that this is meant to be a "same-as-previous-question-but-in-Lightning" answer, so interested readers might also want to check out this question. Advanced error handling is left as an exercise to the reader.

LightningMethods.cls

This class provides the query and update mechanisms that we need. Other methods would be ideal for a solid, reusable framework, but this should get you started.

public class LightningMethods {
    @AuraEnabled public static void updateRecords(SObject[] records) {
        update records;
    }
    @AuraEnabled public static SObject[] queryRecords(String query) {
        return Database.query(query);
    }
}

UpdateRecordComponent.cmp

Change the name of the component, as appropriate, plus all related data types.

<aura:component controller="LightningMethods" implements="force:hasRecordId,flexipage:availableForRecordHome">
    <aura:attribute name="record" type="SObject" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <ui:button label="Update" press="{!c.updateRecord}" />
</aura:component>

UpdateRecordComponentController.js

This only includes the minimum error handling, but demonstrates how we can query and update records. Again, modify data types as needed for your purpose.

({
    doInit: function(component) {
        var action = component.get("c.queryRecords");
        action.setParams({
            query: "SELECT Id, No_Parent_Account__c FROM Account WHERE Id = '"+recordId+"'"
        });
        action.setCallback(this, function(result) {
            // Add error handling here
            if(component.isValid() && event.getState() === "SUCCESS") {
                component.set("v.record", result.getReturnValue()[0]);
            }
        });
        $A.enqueueAction(action);
    },
    updateRecord: function(component, event, helper) {
        var record = component.get("v.record")
            action = component.get("c.updateRecords");
        record.No_Parent_Account__c = !record.No_Parent_Account__c;
        action.setParams({
            records: [record]
        });
        action.setCallback(this, function(result) {
            // Add error handling here
            if(component.isValid() && event.getState() === "SUCCESS") {
                var toast = $A.get("e.force:showToast"),
                    refresh = $A.get("e.force:refreshView");
                toast.setParams({
                    title: "Record Updated",
                    message: "The record was updated successfully."
                });
                toast.fire();
                refresh.fire();
            }
        });
        $A.enqueueAction(action);
    }
})

Answer 2

As one option, you can create a Custom Quick Action which could include a Lightning component to run the equivalent JS as your original button would. Quick Actions can also include Invocable Apex as another option if that would serve your purpose.