useMMAppCommands

Returns functions for all capabilities of Embeddable Zones.

Usage

import { useMMAppCommands } from '@machinemetrics/mm-react-tools';

function MyWidget() {
  const {
    launchModal, // open a sidesheet modal
    toast, // present a toast notification to the user
    popup, // mask screen and prompt user on opdash
    setSummary, // set tab sub heading in opdash
    confirm, // present an alert to the user with options
    setLoaded, // informs framework that app/widget/input has loaded
    trackEvent, // track an analytics event
  } = useMMAppCommands();

  const handleAction = async () => {
    // Show a toast
    toast('Operation completed successfully');

    // Show a popup
    popup('Please review the changes');

    // Set a summary
    setSummary('Last updated: ' + new Date().toLocaleString());

    // Open a sidesheet modal
    await launchModal(`${window.location.origin}/machine/123`, {
      title: 'Machine Details',
      editTitle: 'Edit Machine',
      onSave: (data) => {
        console.log('Saved:', data);
      },
    });

    // Show a confirmation dialog
    const result = await confirm({
      header: 'Confirm Action',
      body: 'Are you sure you want to proceed?',
      choices: [
        { value: 'no', label: 'No' },
        { value: 'yes', label: 'Yes' },
      ],
    });

    if (result === 'yes') {
      // Handle confirmation
      console.log('User confirmed');
    }

    // Track an analytics event
    trackEvent('action_confirmed', { actionType: 'example' });
  };

  return (
    <div>
      <button onClick={handleAction}>Perform Action</button>
    </div>
  );
}

Returns

Returns an object containing:

• launchModal: Function to open a sidesheet modal
• toast: Function to show a toast notification
• popup: Function to show a popup message (only available in Operator Dashboard)
• setSummary: Function to set the tab sub heading in opdash
• confirm: Function to show a confirmation dialog with options
• setLoaded: Function to inform MachineMetrics that the app, widget, or input has loaded
• trackEvent: Function to track an analytics event

launchModal Parameters

Opens a sidesheet modal that slides in from the right side of the screen.

Parameter	Type	Required	Description
path	string	Yes	Fully qualified URL to load in the modal (must include origin)
options	object	No	Configuration options

Options:

Option	Type	Description
title	string	Default title for the modal header
editTitle	string	Title shown when in edit mode
editOnly	boolean	Opens directly in edit mode (saves/cancels close the modal)
onSave	function	Callback receiving data returned from useMMAppModalSave
pagination	array	Array of { title, url } objects for navigating between items

confirm Parameters

Parameter	Description
header	The header text for the confirmation dialog
body	The body text for the confirmation dialog
choices	Array of objects with value, label, and optional variant

Choice Object:

Property	Description
value	Value returned when this choice is selected
label	Button label
variant	Optional button variant (same values as sidesheet header badges in useMMAppInfo)

trackEvent

Tracks an analytics event. Use this to record how users interact with your embedded app.

note

Usage data is collected internally by MachineMetrics. Access to your app's analytics is available by request.

const { trackEvent } = useMMAppCommands();

// Track a button click
trackEvent('button_clicked', { buttonId: 'save', section: 'settings' });

// Track a feature usage
trackEvent('chart_rendered', { chartType: 'bar', dataPoints: 42 });

Parameter	Type	Required	Description
eventName	string	Yes	Name of the event to track
properties	object	No	Additional properties to include

Your app is automatically identified in the recorded events.