--- title: Composite & Utility slug: guide/composite-and-utility description: Use composite and utility components in Unaric Guide to build advanced help layouts, reusable blocks, and integrated tools for your Salesforce users. docTags: createdAt: 2025-09-29T04:34:13.685Z --- Pre-built combinations or wrappers. :::::ExpandableHeading ## Utility 1 (`IHUtility1`) Visually, the **Utility 1** component is a ready-made combination of a Topic Viewer and a Tree View. However, it also includes a Position Detector in **Help Cue** mode that is able to provide automatic contextualisation and interaction logging if desired. Whilst it can be deployed in a wide variety of Lightning page layouts, Utility 1 is particularly suited to use in the Utility Bar: A given Utility item can contain only a single Lightning component, so it’s useful to have a *wrapper* that offers the services of several items in one. Being a combination of components, many of the design parameters of this component are similar to those described elsewhere. :::hint{type="success"} **Best Used For/Key Features:** - Always-on help - Training hub - Feedback & sentiment tracking **Admin Insights & Deployment Tips:** Deploy to Utility Bar; configure contextualisation rules; collect heat-maps & feedback. **Example Use Cases:** 'Help for this Page' everywhere in Salesforce **Expected Business Outcomes:** - Immediate adoption gains - Higher user satisfaction ::: :::ExpandableHeading ### Tree: Collapse Tools At (`TreeMaxListingTools`) The maximum number of tools to display against each node of the Utility 1's Tree sub-component. Enter a positive integer to display that number of tools (maximum) before collapsing to an ellipsis. - Enter -1 to always show all available tools without collapsing to an ellipsis. - Enter 0 (zero) to always collapse to an ellipsis menu, ::: :::ExpandableHeading ### Tree: Enable Drand and Drop (`TreeDDAllowed`) Controls the Drag and Drop behaviour of the Utility 1's Tree sub-component. For more details, refer to the Tree component's Enable Drag and Drop parameter. ::: :::ExpandableHeading ### Contextualisation: Listens To (`PDListensTo`) See details under common attributes. ::: :::ExpandableHeading ### Contextualisation: Component ID (`PDPositioningGroup`) See details under common attributes. Note that Utility 1 uses the value provided to set the component IDs of its tree and topic viewer sub-components. If Component ID is set to *MyUtility1*: - Utility 1’s tree will have a component ID of *MyUtility1\_Tree*. - Utility 1’s topic viewer will have a component ID of *MyUtility1\_Topic*. ::: ::::ExpandableHeading ### Contextualisation: Navigation Checking Interval (`PDContextCheckInterval`) :::hint{type="danger"} Use with due regard for machine resources. ::: Enter zero unless re-contextualisation is required. Enter a number greater than zero (representing milliseconds) to check for changes in user context (page address) periodically and issue related re-contextualisation instructions to this component's tree view and topic viewer. Minimum recommended interval is *1000*. :::: :::ExpandableHeading ### Contextualisation: Auto-open Utility Item (`PopUtilityBar`) If using this component in the Utility Bar, check this box to pop it open when contextualisation messages are received. ::: :::ExpandableHeading ### Contextualisation: Log Interaction (`PDLogContextInteraction`) See **Log Context Interaction** under Position Detector. ::: :::ExpandableHeading ### Contextualisation: Help Context (`PDHelpRecordId`) See ‘Help Context’ under Position Detector. ::: :::ExpandableHeading ### Tree: Max. Depth (`TreeMaxDepth`) See ‘Max Depth’ under Tree View. ::: :::ExpandableHeading ### Tree: Node Provider (`TreeNodeProvider`) See ‘Node Provider’ under Tree View. ::: :::ExpandableHeading ### Tree: Node Icon Style (`TreeNodeIconStyle`) See ‘Node Icon Style’ under Tree View. ::: :::ExpandableHeading ### Tree: Display Density (`TreeDisplayDensity`) See ‘Display Density’ under Tree View. ::: :::ExpandableHeading ### Tree: Suppress Node Tools (`TreeSuppressListingTools`) See ‘Suppress Node Tools’ under Tree View. ::: :::ExpandableHeading ### General: Allow Popout (`supportsPopout`) When used in the Utility Bar, set to True (tick the box) to enable Utility 1 to be 'popped out' into a separate window. ::: :::ExpandableHeading ### General: Tool Context (`ToolContext`) See details under common attributes. ::: :::ExpandableHeading ### General: Root Topic (`RootNode`) Id of the record to be used as the ' root ' of the Tree View (and the initial item displayed on the Topic Viewer) on this component. ::: :::ExpandableHeading ### General: Left Column Width (`ColumnRatio`) Default width of the left-hand (Tree View) component of this utility, as a percentage. Select from 33, 40 or 50 percent. If setting this attribute via parameters to the Improved Help Lightning Out Host (the `IHLUXOutHost`Visualforce page), values should be passed without the percentage sign, for example: `/apex/iahelp__IHLUXOutHost?NSApp=iahelp&App=appIH&NSComp=iahelp&Comp=IHUtility1&Parms=PDPositioningGroup~IHLUXApp_UtilBar^ColumnRatio~40^Height~-2^SuppressHeaders~true^SuppressFooters~true^TreeSuppressListingTools~true^RootNode~[Topic ID]`. ::: :::ExpandableHeading ### General: Layout (`FormFactor`) Controls the overall appearance of the component, which can be useful in limited screen-real-estate scenarios, such as mobile layouts. Set to *Single Column* to switch between Tree and Topic viewer when navigating. Use *Standard* to show both components at all times. ::: :::ExpandableHeading ### General: Suppress Headers (`SuppressHeaders`) & Footers (`SuppressFooters`) These parameters operate as described under common attributes. However, these parameters are named in the plural because they control the headers and footers of both the **Tree View** and the **Topic Viewer** forming the **Utility 1**. ::: :::::