Introduction
This is one post in a series of short examples of things that can be done using the Aikau framework. The series is not intended to provide complete documentation but simply to show how to solve frequently encountered problems, implement repeating UI patterns, show case how to use existing widgets or how to create new ones.
Real World Use Case
Whilst creating an example extension to embed advanced search forms into the standard filtered search page I wanted to be able to switch between simple and advanced search using a link. In order to do this I leveraged the “visibilityConfig” attribute that all widgets can be configured with (when nested in a parent widget). This is a simplified version of that use case.
Simplified Example
In this example we're going to create two logos that can be toggled between using two links, however only one link and one logo are ever displayed on the page at the same time. This is a trivial example but the technique can be easily expanded to cover much more complex scenarios.
Visibility Config
In my JavaScript controller file create a variable to representing the visibility topic that will be published on:
var toggleTopic = 'TOPIC';Then create two JavaScript objects to represent the two different visibility configurations for each toggle state:
var showSurfLogoRules = {
initialValue: false,
rules: [
{
topic: toggleTopic,
attribute: 'show',
is: [true],
isNot: [false]
}
]
};
var showAlfrescoLogoRules = {
initialValue: true,
rules: [
{
topic: toggleTopic,
attribute: 'show',
is: [false],
isNot: [true]
}
]
};Note that the “showSurfLogoRules” has an “initialValue” attribute of true and the “showAlfrescoLogoRules” has an “initialValue” attribute of false. This ensures that widgets are initialised in the correct visibility state depending upon whether they were to be shown or hidden.
Both configurations contain a single rule that subscribe to the same topic (defined earlier the eariler variable) and both identify the same attribute (“show”) in any payload published on that topic. The difference is that the “showSurfLogoRules” rule was looks for the attribute to be “true” and not false, and the “showAlfrescoLogoRules” rule looks for the attribute to be “false” and not “true”.
PropertyLinks
Then define a JSON model for two “alfresco/renderers/PropertyLink” widgets:
var showAlfrescoLogo = {
name: 'alfresco/renderers/PropertyLink',
config: {
visibilityConfig: showAlfrescoLogoRules,
currentItem: {
label: 'Show Alfresco Logo'
},
propertyToRender: 'label',
useCurrentItemAsPayload: false,
publishTopic: toggleTopic,
publishPayloadType: 'CONFIGURED',
publishPayload: {
show: true
}
}
};
var showSurfLogo = {
name: 'alfresco/renderers/PropertyLink',
config: {
visibilityConfig: showSurfLogoRules,
currentItem: {
label: 'Show Surf Logo'
},
propertyToRender: 'label',
useCurrentItemAsPayload: false,
publishTopic: toggleTopic,
publishPayloadType: 'CONFIGURED',
publishPayload: {
show: false
}
}
};A PropertyLink widget is normally used within a list to provide links to perform actions (such as navigating to a page or opening a dialog) and would automatically be assigned a “currentItem” attribute for each item iterated over.
In this case we simply define a custom “currentItem” object containing a “label” attribute and then configure that attribute to be rendered by mapping it in the “propertyToRender” attribute. The “showAlfrescoLogo” link is assigned the “showAlfrescoLogoRules” visibility configuration and the “showSurfLogo” link is assigned the “showSurfLogoRules” visibility configuration so that they effectively hide themselves, but reveal the other PropertyLink when clicked.
Typically a PropertyLink will publish its “currentItem” object when clicked so this is overridden by setting the “useCurrentItemAsPayload” attribute to false and a new publication is configured to publish a payload containing a “show” attribute with the appropriate boolean value for the link.
Logo Widgets
Next define the “alfresco/logo/Logo” widgets to toggle between when using the links:
var alfrescoLogo = {
name: 'alfresco/logo/Logo',
config: {
logoClasses: 'alfresco-logo-large',
visibilityConfig: showSurfLogoRules
}
};
var surfLogo = {
name: 'alfresco/logo/Logo',
config: {
logoClasses: 'surf-logo-large',
visibilityConfig: showAlfrescoLogoRules
}
};Finally add all the widgets into the model to be rendered as so:
model.jsonModel = {
widgets: [
{
name: 'alfresco/layout/VerticalWidgets',
config: {
widgets: [
showAlfrescoLogo,
showSurfLogo,
alfrescoLogo,
surfLogo
]
}
}
]
};Example In Action
This is defined in a JavaScript controller for a WebScript mapped to the /toggleLogo URL. When deployed to a Share (or any Surf based Aikau application) this can be accessed by the URL: http://localhost:8081/share/page/dp/ws/toggleLogo
The following screenshots show the two toggle states.
This entire example can be downloaded here for you to try out. Simply drop the JAR into your 'share/WEB-INF/lib' directory and restart the server.
Download a PDF version of this here.
