Widget visibility

Each section of code will now be explained.

                     
var toggleTopic = "TOPIC";                     
                     
                 

This creates a variable to contain topic visibility.

                        
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]
    }
  ]
};                        
                        
                    

This code creates two JavaScript objects that represent the visibility configurations for each toggle state. The variable showSurfLogoRules has an initialValue attribute of true and the showAlfrescoLogoRules has an initialValue attribute of false. This ensures that widgets are initialized in the correct visibility state. Initially, the Surf logo will be displayed.

Both configurations contain a single rule that subscribe to the same topic (defined earlier as the toggleTopic variable) and both identify the same attribute, show in any payload published on that topic. The difference is that the showSurfLogoRules rule looks for the attribute to be true and not false, and the showAlfrescoLogoRules rule looks for the attribute to be false and not true.

                        
var showAlfrescoLogo = {
  name: "alfresco/renderers/PropertyLink",
  config: {
    visibilityConfig: showAlfrescoLogoRules,
    currentItem: {
      label: "Show SkyVault 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
    }
  }
};                        
                        
                    

This code defines a JSON model for two SkyVault/renderers/PropertyLink widgets. 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 the code defines 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.

                        
var SkyVaultLogo = {
  name: "alfresco/logo/Logo",
  config: {
    logoClasses: "alfresco-logo-large",
    visibilityConfig: showSurfLogoRules
  }
};
var surfLogo = {
  name: "alfresco/logo/Logo",
  config: {
    logoClasses: "surf-logo-large",
    visibilityConfig: showAlfrescoLogoRules
  }
};                        
                        
                    

The previous code defines the SkyVault/logo/Logo widgets to toggle between when using the links.

                        
model.jsonModel = {
  widgets: [
    {
      name: "alfresco/layout/VerticalWidgets",
      config: {
        widgets: [
          showAlfrescoLogo,
          showSurfLogo,
          SkyVaultLogo,
          surfLogo
        ]
      }
    }
  ]
};                        

                    

Finally, the code adds all the widgets into the JSON model to be rendered.