Include Help in Wrapper Components

include improved help in locally defined ‘wrapper’ components our improved help components can be incorporated into locally defined composite lightning components (composites) such composites can be used wherever one would normally position components, including, for example, flow screens once help components are included within the desired ui, content authoring is a non technical exercise authors can work 'in place' where the content appears or on dedicated layouts there are two approaches for embedding improved help components inside your own custom lightning components aura components you can directly include help components in your markup using tags like \<iahelp\ ihdetail> with attributes lightning web components (lwc) since cross namespace components aren't supported in lwc, you use an iframe pointing to the lightning out host page aura wrapper components our lightning aura components can be included directly within locally defined composites improved help component mark up all improved help components can be added into your own lighting component mark up simply add the appropriate component tags and set their attributes a typical tag for a help component will resemble the following \<iahelp \[component api name]> \<aura\ set attribute="\[attribute name]" value="\[desired value]" /> \</iahelp \[component api name]> \[component api name] is the name of the desired help component; \[attribute name] is the name of the attribute to be controlled; \[desired value] is the value to set for the attribute as with the lightning out host, component and attribute names are case sensitive and as specified in the relevant component definitions under ‘design attributes’ the following code snippet could be used to add a listing of related help resources to a locally defined lightning component, with the topic whose resources are to be displayed controlled by a locally defined selectedhelptopic attribute \<aura\ set attribute="recordid" value="{!v selectedhelptopic}" /> \<aura\ set attribute="cardconfig" value="resources" /> \</iahelp\ ihlist> controlling component layout standard web and salesforce mark up authoring techniques can be used as desired to position help components within broader page layouts in particular, we advise customers to make use of the salesforce lightning design system and its responsive grid layout (slds grid) facilities please search salesforce documentation for details by way of example, the mark up below positions a help topic viewer in the right hand ⅓ of the screen, with the left hand two thirds used to show a saleforce record \<div class="slds grid" > \<div class="slds col slds size 2 of 3" style="background color rgb(182, 209, 218);"> \<force\ recordview> \<aura\ set attribute="recordid" value="006a000000e7d0xiav" /> \</force\ recordview> \</div> \<div class="slds col slds size 1 of 3"> \<iahelp\ ihdetail> \<aura\ set attribute="helprecordid" value="a0t2g00000auietuad" /> \</iahelp\ ihdetail> \</div> \</div> the above mark up produces a component with a layout similar to the image accompanying this topic lwc wrapper components our lightning web components can be included in wrappers using our lightning out host as sfdc do not allow components to be shared across namespaces in lwc, composites rely on our lightning out host page (iahelp ihluxouthost), presented via an iframe the composite's code controls which help components to present via the host as well as how, when and where to display the iframe please see the materials related to this topic for an example lwc composite example screen lwc composite html screen 5 for more complex, sf object based form fills, the help autoform offers easily configured embedded, contextual help toggle form lwc composite javascript import { lightningelement } from 'lwc'; export default class flowscreen5 extends lightningelement { miniform = false; minfields = 'reason,subject'; frameroot = '/apex/iahelp ihluxouthost?hookmode=0\&nsapp=iahelp\&app=appih\&nscomp=iahelp&'; framesource = this frameroot 'comp=ihautoform\&parms=height 1^sobjectnamecase^layoutnamecase case layout'; toggleform() { if (this miniform == true) { this framesource = this frameroot 'comp=ihautoform\&parms=height 1^sobjectnamecase^layoutnamecase case layout'; } else { this framesource = this frameroot 'comp=ihautoform\&parms=height 1^sobjectnamecase^layoutnamecase case layout^limitfields ' this minfields '^suppressheadertrue^suppressfootertrue^suppressmodetools true'; } this miniform = ! this miniform; } }