Salesforce: 从utilitybar打开lwc

2024-01-18 23:12:46

lwc是可以设置一个lightning__UtilityBar的target，从而直接放在utility bar里。但有两个缺点，一是这样只能显示在弹出窗口，二是弹出窗口不能自动关闭。

通过将lwc包装在aura组件，从而调用workspace API和utlitybar API，可以实现这两个功能。

第一个aura组件lwcWrapper，包装lwc。lwcWrapper.cmp:

<aura:component implements="flexipage:availableForAllPageTypes,lightning:isUrlAddressable,lightning:availableForFlowScreens,force:appHostable"  access="global" >    
  <div class="slds-theme_default">
    <c:mylwc name="MyLWC" /> 
  </div>
</aura:component>

这个div的作用是让大部分背景显示成白色。

第二个aura组件openLwc，调用workspace API和utlitybar API。openLwc.cmp:

<aura:component implements="flexipage:availableForAllPageTypes,lightning:isUrlAddressable,lightning:availableForFlowScreens,flexipage:availableForRecordHome"  access="global" >    
    <lightning:workspaceAPI aura:id="workspace"/>
    <lightning:utilityBarAPI aura:id="utilitybar" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
</aura:component>

openLwcController.js:

({
  init: function(component, event, helper) {
    var utilityAPI = component.find("utilitybar");
    utilityAPI.getAllUtilityInfo().then(response => {
      if (typeof response !== ‘undefined‘) {    
        utilityAPI.getEnclosingUtilityId().then(utilityId => {
          utilityAPI.onUtilityClick({ 
              eventHandler: response => helper.openMyLwc(component, event, helper) 
          }).catch(error => console.log(‘onUtilityClick: eventHandler error: ‘ + error));   
        })
        .catch(error => console.log(‘init: utilId error: ‘ + error));    
      }
    });  
  }
})

openLwcHelper.js:

({
  openMyLwc:function(component, event, helper) {
    var workspaceAPI = component.find("workspace");
    workspaceAPI.getAllTabInfo().then(tabInfo => {
      let isExisting = false;
      let tabId = null;
      let utilityAPI = component.find("utilitybar");
      if (tabInfo && tabInfo.length > 0) {
        for (let i = 0; i < tabInfo.length; i++) {
          if (tabInfo[i].url.indexOf(‘c__lwcWrapper‘) > -1) {
            isExisting = true;
            tabId = tabInfo[i].tabId;
            break;
          }
        }
        if (isExisting) {
           //console.log(tabId);
           workspaceAPI.focusTab({tabId: tabId})
           .then(result => helper.minimizeUtility(utilityAPI)).catch(console.log);
        }
      }
      if (!isExisting) {
        workspaceAPI.openTab({
          pageReference: {
              "type": "standard__component",
              "attributes": {
                  "componentName": "c__lwcWrapper"
              }
          },
          focus: true              
        }).then(tabId => {
          //console.log("The new tab ID is:" + tabId);
          workspaceAPI.setTabLabel({
            tabId: tabId,
            label: "My Lwc"
          })
          .then(tabInfo => helper.minimizeUtility(utilityAPI)).catch(console.log);          
        }).catch(console.log);         
      }
    });
  },
  minimizeUtility: function(utilityAPI) {
    utilityAPI.minimizeUtility().catch(console.log);
  }
})

因为缺省情况下，tab页的标签显示为Loading...，所以用setTabLabel来设置一下。如果tab页已打开，则聚焦到已打开的tab页，而不重复打开。

Salesforce: 从utilitybar打开lwc

码农公寓

相关文章