useMMAppInfo

Sets the title and badges displayed in the sidesheet header when your app is opened as a modal via launchModal.

Usage

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

function EditPartForm() {
  const [status, setStatus] = useState('active');
  const partName = 'Bearing Assembly';

  useMMAppInfo(
    {
      title: partName,
      badges: [
        { variant: 'success', label: status },
        { variant: 'primary', label: 'Rev 3' },
      ],
    },
    [partName, status] // Update when these values change
  );

  return (
    <div>
      {/* Your form content */}
    </div>
  );
}

Parameters

Parameter	Type	Description
info	object	Object containing title and badges to display in the sidesheet header
stateTriggers	array	Optional array of dependencies. Info will be updated when these values change

Info Object

Property	Type	Description
title	string	The title to display in the sidesheet header
badges	array	Optional array of badge objects to display in header

Badge Object

Property	Type	Description
variant	string	Badge color variant (see Badge Variants below)
label	string	Text to display in the badge

Badge Variants

The following badge variants are available:

Variant	Description
primary	Primary brand color badge
success	Green badge for success/active states
warning	Yellow/orange badge for warnings or attention
danger	Red badge for errors or critical states
alternate	Alternative color scheme
subtle	Subdued, low-emphasis badge
highlight	High-emphasis badge for important information

Examples

Simple Title

useMMAppInfo({ title: 'Machine Details' });

Title with Status Badge

const [machineStatus, setMachineStatus] = useState('running');

useMMAppInfo(
  {
    title: 'Machine XYZ-123',
    badges: [{ variant: 'success', label: machineStatus }],
  },
  [machineStatus]
);

Multiple Badges

useMMAppInfo({
  title: 'Work Order #12345',
  badges: [
    { variant: 'warning', label: 'In Progress' },
    { variant: 'primary', label: 'High Priority' },
    { variant: 'alternate', label: 'Assembly Line A' },
  ],
});

Dynamic Updates

The info can be updated dynamically as state changes:

function EditableForm() {
  const [hasChanges, setHasChanges] = useState(false);
  const [formData, setFormData] = useState({ name: 'Item 1' });

  useMMAppInfo(
    {
      title: formData.name,
      badges: hasChanges
        ? [{ variant: 'warning', label: 'Unsaved Changes' }]
        : [],
    },
    [formData.name, hasChanges]
  );

  const handleChange = (newName) => {
    setFormData({ name: newName });
    setHasChanges(true);
  };

  return (
    <div>
      <input
        value={formData.name}
        onChange={(e) => handleChange(e.target.value)}
      />
    </div>
  );
}

Notes

• The title set via useMMAppInfo will override any title passed to the launchModal function
• Badges are displayed in the order they appear in the array
• The stateTriggers array works like React's useEffect dependencies - the info will be re-sent to the platform whenever any of these values change
• If no info is set, the platform will use the default title passed to launchModal