Salesforce: 从utilitybar打开lwc

2021-06-26 21:01:37 阅读：199 来源： 互联网

标签：utilityAPI Salesforce console utilitybar component tabInfo tabId lwc log

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页，而不重复打开。

标签：utilityAPI,Salesforce,console,utilitybar,component,tabInfo,tabId,lwc,log
来源： https://www.cnblogs.com/badnumber/p/14939173.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Salesforce: 从utilitybar打开lwc