AnsweredAssumed Answered

CSS not loaded with dynamic tab

Question asked by vincent-kali on Jul 31, 2018

Hi,

I want to dynamically add new tabs to an AlfTabContainer widget from a custom aikau service.

This new tab contains a custom widget (myGrid) using dojo datagrid component and css dependencies defined using 'cssRequirements' widget property.

When configuring everything from webscript controller like below, it works fine: a button from te main tab publish a payload containing the required config to add a new tab containing myGrid widget.

When publishing exactly the same payload from my custom service, new tab containing  myGrid widget is added, but css dependencies are not loaded......

 

Any idea ?

 

 

Part of webscript controller:

 

model.jsonModel = {

 services: [{
   name: "myCustomService",
   config: {
    ...
   }}
   ],
   widgets: [
    ..., {
     name: "alfresco/layout/AlfTabContainer",
     id: "PROCESS_MONITOR_TABCONTAINER",
     config: {
      tabAdditionTopic: "PROCESS_MONITOR_ADD_TAB_TOPIC",
      tabDeletionTopic: "PROCESS_MONITOR_DELETE_TAB_TOPIC",
      widgets: [{
        id: "PROCESS_MONITOR_OVERVIEW_TAB",
        title: "workflow.processMonitor.tab.main",
        closable: false,
        selected: true,
        name: "ks2ProcessMonitor/layout/SimplePanel",
        config: {
         handleOverflow: true,
         widgets: [{
           ...
          }, {
           id: "WF_PANEL_BUTTON",
           name: "alfresco/buttons/AlfButton",
           config: {
            label: "myLabel",
            publishTopic: "PROCESS_MONITOR_ADD_TAB_TOPIC",
            publishPayload: {
             widgets: [{
               id: "PROCESS_MONITOR_ACTIVE_WF_TAB",
               title: "workflow.processMonitor.tab.activeWf",
               closable: true,
               selected: true,
               delayProcessing: true,
               name: "ks2ProcessMonitor/layout/SimplePanel",
               config: {
                additionalCssClasses: "processMonitor-layout-SimplePanel",
                handleOverflow: true,
                widgets: [{
                  name: ".../MyGridWidget",
                  config: {
                   ...
                  }
                 }
                ]
               }
              }]
            }

Outcomes