Interest Manager - Quick Add Interest
Last Updated: October 1, 2026
AFR features for the Quick Add Interest dialog, which hosts the Interest Manager Quick Add Interest Lightning Web Component inside Client Center through Lightning Out.
Column guide: Fallback is the value the package ships in AFR; Code default is what the code uses when the attribute is not defined at all (and no Fallback exists). Attributes without a Fallback are documented for completeness - the code default applies until an org sets a value.
Features
ACE.Core.QuickAdd.Layouts.QAI
AML dialog that hosts the Interest Manager Quick Add Interest Lightning Web Component (c:fpmQuickAddInterest) outside of the Interest Manager application. Raised by triggering the global aml-showdialog event with configPath ACE.Core.QuickAdd.Layouts.QAI, isCanvas true and the contact id on state as entityId.
| Attribute | Type | Fallback | Code default | Description |
|---|---|---|---|---|
DialogClass |
string | qaiDialog el-dialog aceDialog |
none | The AML dialog template has no width or height attribute, so all dialog sizing is keyed off this class, in the stylesheet the BodyLayout carries. Nothing in the shared Client Center stylesheet sizes it, which is deliberate - the rules live with this layout so they cannot reach any other dialog. |
DialogTitle |
string | {Locale.QUICK_ADD_INTEREST_TITLE} |
— | Title rendered in the dialog header bar via the LayoutLoaderOptions template. |
DragHandle |
string | .dialog-header |
— | |
Modal |
boolean | TRUE |
— | |
EnableUnsavedChangesWatcher |
boolean | FALSE |
FALSE | The component does not publish a dirty state event yet, so the watcher would never see a change. qa:quickAddInterestController already listens for a dirtychange event, set this to TRUE once the component publishes one. |
AppName |
string | FPMLightningOutApp |
FPMLightningOutApp | Lightning Out application (ltng:outApp) the component is created from, without a namespace prefix. $Lightning.use can only be called once per page, so this must name the one application shared by every Interest Manager component embedded in the container - the component has to be declared as an aura:dependency of it. |
Mode |
string | assist |
assist | Value forwarded to the mode attribute of the component - assist or confirm. |
TrackThemeChanges |
boolean | — | TRUE | When TRUE the hosted component follows container theme swaps at runtime, the theme attribute is reassigned on the live component rather than re-creating it. Default is TRUE. |
CloseOnSaveSuccess |
boolean | TRUE |
TRUE | Closes the dialog once the component reports a successful save. |
LoadTimeout |
int | — | 20000 | Milliseconds to wait for the Lightning Out load before releasing the dialog regardless. An AML dialog that never sees a ready signal stays parked off screen. Default is 20000. |
DialogWidth |
string | — | 788px | CSS width of the dialog shell, read by the stylesheet in BodyLayout. Capped at 96vw so it still fits a small window. Default (layout): 788px. |
DialogHeight |
string | — | 610px | CSS height of the dialog shell, read by the stylesheet in BodyLayout. The body scrolls inside a fixed shell and the height is capped at 90vh. Default (layout): 610px. |
Layout |
text | see below | — | Standalone wrapper used when the Quick Add Interest form is launched in a full Visualforce page (ACEQuickAddEntity) instead of an AML dialog. Follows the same pattern as QAA/QAC/QAM/QAT Layout attributes. |
BodyLayout |
text | see below | — | |
Buttons |
text | see below | — | |
LayoutLoaderOptions |
text | see below | — |
All Layout values are for references purpose. The actual layout should be based on the JSON file provided in the package.
Layout Fallback
<div class="flex-parent is-vertical is-centered is-centered--v" style="width: 100%; height: 100%">
<div class="quick-add-dialog qai-dialog standalone-dialog el-dialog">
<header class="dialog-header">
<div class="dialog-header-title-wrapper">
<h1 class="dialog-header-title">{@{URLParam.layoutPath}.DialogTitle}</h1>
</div>
</header>
<div class="dialog-main-content">
{@{URLParam.layoutPath}.BodyLayout}
</div>
<footer class="dialog-footer">
<div class="dialog-footer-buttons-wrapper">
{@{URLParam.layoutPath}.Buttons}
</div>
</footer>
</div>
</div>
BodyLayout Fallback
<div class="ace-qai flex-parent is-vertical is-all" data-aml-properties='{
"controllers": [
{
"controller": "qa:quickAddInterestController",
"options": {
"contactId": "{state.entityId}",
"contactIdStateKeys": ["entityId", "contactId", "recordId"],
"appName": "{@ACE.Core.QuickAdd.Layouts.QAI.AppName<FPMLightningOutApp>}",
"componentName": "fpmQuickAddInterest",
"mode": "{@ACE.Core.QuickAdd.Layouts.QAI.Mode<assist>}",
"languageSelectionRequired": {@BOOLEAN:ACE.FPM.Settings.LanguagePreferencesEnabled<false>},
"trackThemeChanges": {@BOOLEAN:ACE.Core.QuickAdd.Layouts.QAI.TrackThemeChanges<true>},
"supportedAttributes": ["contactId", "mode", "theme", "languageSelectionRequired"],
"closeOnSaveSuccess": {@BOOLEAN:ACE.Core.QuickAdd.Layouts.QAI.CloseOnSaveSuccess<true>},
"loadTimeout": {@NUMBER:ACE.Core.QuickAdd.Layouts.QAI.LoadTimeout<20000>},
"noContactMessage": "{Locale.QUICK_ADD_INTEREST_NO_CONTACT}",
"loadFailedMessage": "{Locale.QUICK_ADD_INTEREST_LOAD_FAILED}",
"maxHeightVh": 72,
"minHeightPx": 260,
"recenterOnResize": true,
"nestedModalSelector": ".slds-modal"
}
}
]
}'><style>
/* Dialog shell. The AML dialog template has no width or height attribute and nothing in the
shared Client Center stylesheet sizes .qaiDialog, so without this the dialog is sized by its
content and changes both width and height every time the component swaps between its input
surface and a resolved one. A fixed shell with a scrolling body is how the rest of the Client
Center dialogs behave. Kept here rather than in the shared stylesheet so it cannot affect any
other dialog */
.el-dialog.qaiDialog {
display: flex;
flex-direction: column;
width: {@ACE.Core.QuickAdd.Layouts.QAI.DialogWidth<788px>};
height: {@ACE.Core.QuickAdd.Layouts.QAI.DialogHeight<610px>};
/* a fixed size must still fit a small window */
max-width: 96vw;
max-height: 90vh;
}
.el-dialog.qaiDialog .dialog-main-content {
flex: 1 1 auto;
/* a flex child does not shrink below its content without this, which would push the footer
out of the dialog instead of scrolling */
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
.el-dialog.qaiDialog .ace-qai,
.el-dialog.qaiDialog .ace-qai-wrapper {
height: 100%;
}
/* Dark theme text. Lightning Out renders the component with synthetic shadow DOM, so these
page level rules reach the labels that lightning-input and lightning-checkbox-group render
inside their own templates - no stylesheet in the component itself can colour those, and the
slds-text-color_* utilities declare their colour with !important, so a component rule loses
to them either way. Scoped to the theme class the controller puts on this container, so
nothing else on the page is touched, and only in dark theme, where the SLDS defaults are too
dark to read. Colours are Client Center's own semantic properties */
.ace-qai-theme-dark .slds-form-element__label,
.ace-qai-theme-dark .slds-form-element__legend,
.ace-qai-theme-dark .slds-checkbox__label,
.ace-qai-theme-dark .slds-radio__label {
color: var(--el-text-content-label, #c0c0c0) !important;
}
.ace-qai-theme-dark .slds-text-color_weak,
.ace-qai-theme-dark .slds-form-element__help,
.ace-qai-theme-dark .slds-form-element__static {
color: var(--el-text-content-secondary, #a3a3a3) !important;
}
</style></div>
Buttons Fallback
<button class="cancelButton"
data-aml-local-events='{"click": ["close"]}'>
{Locale.CLOSE}
</button>
LayoutLoaderOptions Fallback
{
"path": "ACE.Core.TemplateLayouts.Layout",
"replaceElement": true,
"templateValues":
{
"headerText":"AFR:ACE.Core.QuickAdd.Layouts.QAI.DialogTitle",
"body": "AFR:ACE.Core.QuickAdd.Layouts.QAI.BodyLayout",
"buttons": "AFR:ACE.Core.QuickAdd.Layouts.QAI.Buttons"
}
}