How to idenfity which Now Component Button was clicked

[Nia McCash]

Did you know that there is an undocumented (as of 2020-Oct-19) property for the now-button component that can help you identify which button was clicked?  It’s called componentName. 

The Problem

If you use multiple now-button components, you need a way to identify which button was clicked because they will all dispatch the same NOW_BUTTON#CLICKED action. 

For example, here are a couple of now-button components:

Here’s the code for the above set of buttons: 

<now-button label="Save" variant="primary" size="md"></now-button>
<now-button label="Cancel" variant="secondary" size="md"></now-button>

Here is the action handler: 

actionHandlers: {
	'NOW_BUTTON#CLICKED': ({ action, updateState }) => {
		console.log(JSON.stringify(action));
	}
}

Here is an example of what would be logged in the console: 

I’ll be honest and say I don’t know how the id gets generated -- if you know, please comment below.

To me, it seems to be a somewhat random string of characters and I have found that it changes on every build of the component. So, it is not useful in determining which button was clicked. 

Aside from id, the there are no other distinguishing properties to help determine which button was clicked.

Solution One

Credit and thanks goes to John Daniel from the SNDevs Slack community for providing this solution.

Apparently, there is a property that is not listed in the API documentation (as of 2020-Oct-19) called componentName. 

You can use this property with the now-button component and its derivatives/variants like now-button-iconic or now-button-stateful.

When you add the property: 

<now-button label="Save" variant="primary" size="md" componentName=”save”></now-button>
<now-button label="Cancel" variant="secondary" size="md" componentName=”cancel”></now-button>

The console log now shows:

The componentName can now identify via the action object which button was clicked.

Disclaimer: Given that this is not documented at the time of this article’s publishing, there may be a risk that the property is not supported and/or no longer available in the future. 

If you have more information about the componentName property, please add your comments below and let us know.

Solution Two

Additionally, Brad Tilton pointed me to the the (documented) ability to Append to a Payload.

You can append an identifier for the button to the payload like this:

<now-button label="Save" variant="primary" size="md" append-to-payload={{buttonId: 'save'}}></now-button>
<now-button label="Cancel" variant="secondary" size="md" append-to-payload={{buttonId: 'cancel'}}></now-button>

The console log now shows: 

I chose to name the property that I added to the payload as buttonId but you can choose to name it whatever is most appropriate to you for your use case.

I hope this post helps others who run into the same question as I did about how to identify which button was clicked.

If you're looking for a way to get started with Now Experience UI Framework development, check out my article on How I'm Learning to Build Now Components.

[Foster Hardie]

Thank you thank you! How on earth is this undocumented? And, why wouldn't something standard, like id or name be in the payload?

Rhetorical questions, of course, but good grief!

[David Hubbard]

This is very useful - I note that 1 year on - these are still not documented!

I have found a slight wrinkle. When using the button/icon dynamically (i.e. generating and rendering the required html) you need to use kebab case "component-name" instead of camel case "componentName".

We are using a 3rd-party component - which generates the view and is able to "render" the data using

{ id: "assignment_group", header: [{ text: "Assignment Group" }]
    htmlEnable: true,
    template: function(cellValue, row, col) {
        return `<now-button 
                  label="${cellValue.name}" 
                  variant="inherit" 
                  size="sm" 
                  bare="true" 
                  component-name="assignGroup-${row.id}"></now-button>`
    }
}

This produces a clickable button with the correct icon and when the button/icon is clicked the "componentName" is now provided

Ideally I would be able to get the row id via payload (rather than needing to parse the componentName) but I do not know if any similar approach could apply to the "append-to-payload" option - my suspicion is that as this is kebab-case already some differing processing is applied to it.