Branding / Home Widget Pattern

Overview

A simple display widget placed on the Home layout. Reads the tenant's logo URL and other branding settings from the platform via useSettingsContext. No instance data, no save interaction.

When to Use

• Display a tenant logo or welcome banner on the Home page
• Show static or settings-driven content that does not depend on any instance

Applicable Layout Types

Target	Notes
HomePage	Primary target for this pattern
Any	Can also be used on any layout for static/branding content

Pattern Structure

1. Access useSettingsContext from protrakUtils
2. Read settings.logoUrl, settings.id, or other tenant settings
3. Return display-only JSX — no onAttributeEdit, no API calls

Code Example

function LogoWidget(pageContext) {
  const { protrakUtils } = React.useContext(customWidgetContext);
  const { useSettingsContext } = protrakUtils;
  const { settings } = useSettingsContext();

  return (
    <div style={{ textAlign: 'center', padding: '2rem' }}>
      <img
        src={settings.logoUrl}
        alt="Company Logo"
        style={{ maxWidth: '200px' }}
      />
      <hr style={{ width: '20%', margin: '1rem auto' }} />
      <h2>Welcome to [Application Name]</h2>
    </div>
  );
}

Accessing Tenant Settings

useSettingsContext returns the same settings object available in pageContext.settings. Use either:

// Via hook (any widget, any layout)
const { useSettingsContext } = protrakUtils;
const { settings } = useSettingsContext();

// Via pageContext (same object)
const { settings } = pageContext;

The settings object includes:

{
  id: string,        // Tenant ID — used in file download paths
  logoUrl: string,   // URL of logo uploaded in Admin > Tenant Settings
  dateTimeFormat: {
    dateFormat: string,
    timeFormat: string,
    timeZone: string,
    timeZoneId: string,
  },
}

Real Examples

• LogoWidget.js — Aaryan Devcon, Buildcast, Construction360, MountMeru, DevinciPrecastPOC