Current Version: 2.0.2

Relevant Specifications: Solution Switcher

Github: @coralui/coralui-component-shell-solutionswitcher

The Shell.SolutionSwitcher component provides an easy way to quickly switch between solutions and core services. The intended UI pattern is to have this panel slide out from underneath item is activated. Providing quick access to other Adobe solutions establishes a clear connection between the current context and other Adobe offerings, both active or inactive.

In implementation, it is important to include inactive solutions in large and small viewports, with intelligent paths to account linking where applicable.

Markup Examples

Default

Analytics Audience Manager Media Optimizer Social Target

Campaign Experience Manager Primetime

Profiles & Audiences Assets Mobile Services Exchange Activation Collaboration

Show Markup

Coral .Shell.SolutionSwitcher API

Constructor

JavaScript:: new Coral.Shell.SolutionSwitcher() or document.createElement('coral-shell-solutionswitcher')
HTML Tag:: <coral-shell-solutionswitcher>

Extends

Coral.Component

Instance Properties

instance.hidden {Boolean} Reflected

Whether this component is hidden or not.

Inherited From:

Coral.Component#hidden

Default Value:

false

HTML Attribute:

hidden

Methods

instance.get

Get the value of a property.

Parameters:

Name	Type	Description
property	String	The name of the property to fetch the value of.

Returns:

Property value. {*}

Inherited From:

Coral.Component#get

instance.hide

Hide this component.

Returns:: this, chainable {Coral.Component}

Inherited From:

Coral.Component#hide

instance.off

Remove an event listener.

Parameters:

Name	Type	Optional	Description
eventName	String	No	The event name to stop listening for.
selector	String	Yes	The selector that was used for event delegation.
func	function	No	The function that was passed to `on()`.
useCapture	Boolean	Yes	Only remove listeners with `useCapture` set to the value passed in.

Returns:

this, chainable. {Coral.Component}

Inherited From:

Coral.Component#off

instance.on

Add an event listener.

Parameters:

Name	Type	Optional	Description
eventName	String	No	The event name to listen for.
selector	String	Yes	The selector to use for event delegation.
func	function	No	The function that will be called when the event is triggered.
useCapture	Boolean	Yes	Whether or not to listen during the capturing or bubbling phase.

Returns:

this, chainable. {Coral.Component}

Inherited From:

Coral.Component#on

instance.remove

Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it.

Inherited From:

Coral.Component#remove

instance.set

Set a single property.

Parameters:

Name	Type	Description
property	String	The name of the property to set.
value	*	The value to set the property to.
silent	Boolean	If true, events should not be triggered as a result of this set.

Returns:

this, chainable. {Coral.Component}

Inherited From:

Coral.Component#set

instance.show

Show this component.

Returns:: this, chainable {Coral.Component}

Inherited From:

Coral.Component#show

instance.trigger

Trigger an event.

Parameters:

Name	Type	Optional	Description
eventName	String	No	The event name to trigger.
props	Object	Yes	Additional properties to make available to handlers as `event.detail`.
bubbles	Boolean	Yes	Set to `false` to prevent the event from bubbling.
cancelable	Boolean	Yes	Set to `false` to prevent the event from being cancelable.

Returns:

CustomEvent object {CustomEvent}

Inherited From:

Coral.Component#trigger

Events

coral-component:attached

Triggered when the component is attached to the DOM.

Callback Parameters:

Name	Type	Description
event	Object	Event object.

Inherited From:

Coral.Component#coral-component:attached

Deprecated:

since 1.14.0, use MutationObserver instead.

coral-component:detached

Triggered when the component is detached to the DOM.

Callback Parameters:

Name	Type	Description
event	Object	Event object.

Inherited From:

Coral.Component#coral-component:detached

Deprecated:

since 1.14.0, use MutationObserver instead.

coral-component:ready

Triggerred when the component has been upgraded and is ready for use.

Callback Parameters:

Name	Type	Description
event	Object	Event object.

Inherited From:

Coral.Component#coral-component:ready

Deprecated:

since 1.9.0, use Coral.commons.ready() instead.

Coral .Shell.Solutions API

Constructor

JavaScript:: new Coral.Shell.Solutions() or document.createElement('coral-shell-solutions')
HTML Tag:: <coral-shell-solutions>

Extends

Coral.Component

Instance Properties

instance.hidden {Boolean} Reflected

Whether this component is hidden or not.

Inherited From:

Coral.Component#hidden

Default Value:

false

HTML Attribute:

hidden

instance.items {Coral.Collection} Readonly

The item collection. See Coral.Collection for more details.

instance.secondary {Boolean}

Whether the solution list is secondary.

Default Value:

false

Methods

instance.get

Get the value of a property.

Parameters:

Name	Type	Description
property	String	The name of the property to fetch the value of.

Returns:

Property value. {*}

Inherited From:

Coral.Component#get

instance.hide

Hide this component.

Returns:: this, chainable {Coral.Component}

Inherited From:

Coral.Component#hide

instance.off

Remove an event listener.

Parameters:

Name	Type	Optional	Description
eventName	String	No	The event name to stop listening for.
selector	String	Yes	The selector that was used for event delegation.
func	function	No	The function that was passed to `on()`.
useCapture	Boolean	Yes	Only remove listeners with `useCapture` set to the value passed in.

Returns:

this, chainable. {Coral.Component}

Inherited From:

Coral.Component#off

instance.on

Add an event listener.

Parameters:

Name	Type	Optional	Description
eventName	String	No	The event name to listen for.
selector	String	Yes	The selector to use for event delegation.
func	function	No	The function that will be called when the event is triggered.
useCapture	Boolean	Yes	Whether or not to listen during the capturing or bubbling phase.

Returns:

this, chainable. {Coral.Component}

Inherited From:

Coral.Component#on

instance.remove

Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it.

Inherited From:

Coral.Component#remove

instance.set

Set a single property.

Parameters:

Name	Type	Description
property	String	The name of the property to set.
value	*	The value to set the property to.
silent	Boolean	If true, events should not be triggered as a result of this set.

Returns:

this, chainable. {Coral.Component}

Inherited From:

Coral.Component#set

instance.show

Show this component.

Returns:: this, chainable {Coral.Component}

Inherited From:

Coral.Component#show

instance.trigger

Trigger an event.

Parameters:

Name	Type	Optional	Description
eventName	String	No	The event name to trigger.
props	Object	Yes	Additional properties to make available to handlers as `event.detail`.
bubbles	Boolean	Yes	Set to `false` to prevent the event from bubbling.
cancelable	Boolean	Yes	Set to `false` to prevent the event from being cancelable.

Returns:

CustomEvent object {CustomEvent}

Inherited From:

Coral.Component#trigger

Events

coral-component:attached

Triggered when the component is attached to the DOM.

Callback Parameters:

Name	Type	Description
event	Object	Event object.

Inherited From:

Coral.Component#coral-component:attached

Deprecated:

since 1.14.0, use MutationObserver instead.

coral-component:detached

Triggered when the component is detached to the DOM.

Callback Parameters:

Name	Type	Description
event	Object	Event object.

Inherited From:

Coral.Component#coral-component:detached

Deprecated:

since 1.14.0, use MutationObserver instead.

coral-component:ready

Triggerred when the component has been upgraded and is ready for use.

Callback Parameters:

Name	Type	Description
event	Object	Event object.

Inherited From:

Coral.Component#coral-component:ready

Deprecated:

since 1.9.0, use Coral.commons.ready() instead.

Coral .Shell.Solution API

Constructor

JavaScript:: new Coral.Shell.Solution() or document.createElement('coral-shell-solution')
HTML Tag:: <coral-shell-solution>

Extends

Coral.Component

Sub-components

Coral.Shell.Solution.Label

Instance Properties

instance.hidden {Boolean} Reflected

Whether this component is hidden or not.

Inherited From:

Coral.Component#hidden

Default Value:

false

HTML Attribute:

hidden

instance.icon {String}

Specifies the icon name used inside the button.

Default Value:

HTML Attribute:

icon

See:

Coral.Icon

instance.label {HTMLElement}

The solution's label content zone.

instance.linked {Boolean} Reflected

Whether a solution is linked or not

Default Value:

false

Methods

instance.get

Get the value of a property.

Parameters:

Name	Type	Description
property	String	The name of the property to fetch the value of.

Returns:

Property value. {*}

Inherited From:

Coral.Component#get

instance.hide

Hide this component.

Returns:: this, chainable {Coral.Component}

Inherited From:

Coral.Component#hide

instance.off

Remove an event listener.

Parameters:

Name	Type	Optional	Description
eventName	String	No	The event name to stop listening for.
selector	String	Yes	The selector that was used for event delegation.
func	function	No	The function that was passed to `on()`.
useCapture	Boolean	Yes	Only remove listeners with `useCapture` set to the value passed in.

Returns:

this, chainable. {Coral.Component}

Inherited From:

Coral.Component#off

instance.on

Add an event listener.

Parameters:

Name	Type	Optional	Description
eventName	String	No	The event name to listen for.
selector	String	Yes	The selector to use for event delegation.
func	function	No	The function that will be called when the event is triggered.
useCapture	Boolean	Yes	Whether or not to listen during the capturing or bubbling phase.

Returns:

this, chainable. {Coral.Component}

Inherited From:

Coral.Component#on

instance.remove

Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it.

Inherited From:

Coral.Component#remove

instance.set

Set a single property.

Parameters:

Name	Type	Description
property	String	The name of the property to set.
value	*	The value to set the property to.
silent	Boolean	If true, events should not be triggered as a result of this set.

Returns:

this, chainable. {Coral.Component}

Inherited From:

Coral.Component#set

instance.show

Show this component.

Returns:: this, chainable {Coral.Component}

Inherited From:

Coral.Component#show

instance.trigger

Trigger an event.

Parameters:

Name	Type	Optional	Description
eventName	String	No	The event name to trigger.
props	Object	Yes	Additional properties to make available to handlers as `event.detail`.
bubbles	Boolean	Yes	Set to `false` to prevent the event from bubbling.
cancelable	Boolean	Yes	Set to `false` to prevent the event from being cancelable.

Returns: