customWidgetContext
customWidgetContext is a React Context provided by Protrak to every custom widget. It exposes two objects: protrakUtils (utility functions and hooks) and protrakComponents (pre-built UI components).
const { protrakUtils, protrakComponents } =
React.useContext(customWidgetContext);
protrakUtils
| Utility | Description |
|---|---|
| useProtrakApi | Hook for calling Protrak REST APIs with automatic auth |
| protrakApiClient | Low-level HTTP client for use inside promiseFn |
| useProtrakMultiApi | Hook for parallel API calls |
| useTypeLayoutConfig | Fetches and caches type layout configuration |
| formatDate | Formats a date/datetime string using tenant timezone and format |
| dateUtils | Advanced date formatting, parsing, and validation functions |
| dateMnemonics / parseDate | Interprets dynamic date expressions like $StartOfToday(+7d) |
| generateGuid / isEmptyGuid / EMPTY_GUID | UUID generation and checking |
| objectUtils | isEmpty, isArrayOfObject |
| queryStringUtils | toQueryString, parseQueryString |
| numberUtils | round(number, decimalPlaces) |
| keyValueStorage | localStorage wrapper with error handling |
| useRouter | Access current URL, params, and navigate programmatically |
| fieldUtils | getVisibleUniqueFields — filter field config arrays |
| Enums | Platform-wide string constants (AttributeTypes, AllowedOperations, etc.) |
| getAESEncryptedString / getAESDecryptedString | AES string encryption / decryption |
protrakComponents
Layout & Containers
| Component | Description |
|---|---|
| Box, Container | Fundamental layout wrappers |
| Grid | CSS Grid layout |
| BorderBox | Box with a visible border |
| TitleOnBorder | Bordered section with a title label |
Typography
| Component | Description |
|---|---|
| H1 – H5 | Heading components |
| Text | Standard body text |
| Caption | Small secondary text |
| Label | Form field label |
Form Inputs
| Component | Description |
|---|---|
| TextBox | Single-line text input |
| TextArea | Multi-line text input |
| InputBox | MUI-styled input with label and error state |
| Dropdown | Single-select dropdown |
| AsyncDropdown | Dropdown with async data loading |
| Picklist | Protrak-styled select |
| ArrowSelector | Left/right arrow navigation between options |
| RadioButtonGroup | Group of radio buttons |
| RadioButton | Individual radio button |
| CheckboxGroup | Group of checkboxes |
| Boolean | Toggle / checkbox for boolean values |
| Currency | Currency-formatted numeric input |
Buttons & Actions
| Component | Description |
|---|---|
| Button, ButtonEnums | Versatile button with multiple appearances and sizes |
| MenuButton | Button that opens a dropdown action menu |
| Menu | Standalone action menu list |
| ExportCSVButton | Pre-built CSV export button |
Date & Time
| Component | Description |
|---|---|
| FormattedDate | Displays a date using tenant format |
| FormattedDateTime | Displays a datetime using tenant format |
| ProtrakDate | Date picker input |
| ProtrakDateTime | Date + time picker input |
Data Display
| Component | Description |
|---|---|
| InstanceGridForCustomWidget | Full-featured grid for displaying Protrak instances |
| LocalDataGrid | Client-side-only data grid for in-memory arrays |
| downloadExcelFromSchema | Utility to export grid data to Excel |
Modals & Dialogs
| Component | Description |
|---|---|
| Modal | Centred overlay modal |
| TopAlignedModal | Modal anchored to the top of the screen |
| MuiDialog | MUI-based dialog with configurable size and actions |
| ErrorModal | Pre-styled error dialog |
| CloneModalContainer | Modal for clone workflows |
Attribute Renderers (Protrak Field Types)
| Component | Description |
|---|---|
| Attribute | Generic renderer — auto-selects type |
| TextAttribute | Text field renderer |
| NumericAttribute | Numeric field renderer |
| BooleanAttribute | Boolean / toggle renderer |
| PicklistAttribute | Picklist dropdown renderer |
| DateAttribute | Date field renderer |
| DateTimeAttribute | DateTime field renderer |
| CurrencyAttribute | Currency field renderer |
| ExpressionAttribute | Calculated expression renderer |
| RichtextAttribute | Rich-text (HTML) renderer |
| AllUsersAttribute | User field renderer |
| AllUsers | User selector component |
| ReferenceAttribute | Reference field renderer |
| ReferenceAttributePaginateDropDown | Paginated reference selector |
| AttachmentAttribute | Attachment field renderer |
| AttachmentUploader | File upload control |
| NameAttribute | Instance name with link |
| StateAttribute | State badge renderer |
Navigation & Links
| Component | Description |
|---|---|
| InstanceLink | Hyperlink to a Protrak instance view/edit page |
Feedback & Status
| Component | Description |
|---|---|
| Spinner | Loading spinner |
| ErrorMessage | Inline error text |
| HelpTextIcon | Info icon (ⓘ) with tooltip |
| CloneLoadingState | Loading overlay for clone operations |
Decorative & Layout Helpers
| Component | Description |
|---|---|
| HorizontalLine | Visual horizontal divider |
| VerticalSeparator | Visual vertical divider |
| Rotate | Rotates its children by a given angle |
| TimelineHeader | Styled timeline section header |
| Image | Renders an image from a Protrak file ID |
| FileDownloader | Triggers a file download |
| ProtrakFontAwesomeIcon | Protrak-themed FontAwesome icons |
| getAESEncryptedString, getAESDecryptedString | AES encryption utilities |