using Next Experience Components in custom component with servicnow-cli

[ahmedt]

Hello All ,  I try to build custom component in UIB with servicenow cli,
I have a problem when i try to use multiple component from same type `now-toggle` doc for <now-toggle>  they emit the same action with same details I can not decide how to difference between them in 

actionHandlers 

import { createCustomElement, declarativeOperations } from '@servicenow/ui-core';
import snabbdom from '@servicenow/ui-renderer-snabbdom';
import '@servicenow/now-toggle';
const view = (state, { updateProperties, updateState }) => (
	<div>
	<div >
		<now-toggle onclick={e=> console.log(e.target)} data-field="email" id="masadjaskld"/>
		</div>
		<div>
		<now-toggle onclick={e=>{console.log(e.target)
			updateState({
		path: 'math',
		value: 2,
		operation: declarativeOperations.SET
	})
		}} data-field="notifications"/>
		</div>
		
	<button on-click={e => updateState({
		path: 'math',
		value: 2,
		operation: declarativeOperations.SET
	})}>Hello !</button>
	<p>{JSON.stringify(state)}</p>
</div>
);

createCustomElement('my-element', {
	renderer: { type: snabbdom },
	view,
	properties: {
		name: { default: 'Fred' }
	}, setInitialState() {
		return {
			animals: {
				cats: 1,
				oo: { mn: "rec" }
			}
		};
	},actionHandlers:{
		'NOW_TOGGLE#CHECKED_SET': {
			effect(coeffects
			) {
				

      const checked = coeffects.action.payload.checked;
      const field = coeffects.action.element;
      const id = coeffects;

      console.log("field:", field);
      console.log("checked:", checked);
      console.log("id:", id);
			}
		}
	}
});

[harry067bro]

Hello,

The most reliable way to differentiate between multiple components of the same type is to use the name property on your <now-toggle> elements, as the ServiceNow UI Framework automatically includes this property in the action.payload. Instead of trying to scrape data- attributes or the event target, define your toggles with unique names like <now-toggle name="email" /> and <now-toggle name="notifications" />. Within your actionHandlers, you can then destructure name and checked directly from coeffects.action.payload to identify exactly which toggle was flipped and update your state accordingly.