Tutorial: Compartilhar dados e eventos entre as funções personalizadas do Excel e do painel de tarefas

Use um runtime compartilhado para compartilhar dados globais entre as funções personalizadas do suplemento do Excel e o painel de tarefas. Neste tutorial, você adiciona funções e controles do painel de tarefas que leem e atualizam a mesma variável.

Pré-requisitos

Conclua o tutorial de funções personalizadas do Excel e use o suplemento que você criou. O projeto deve usar as Funções Personalizadas do Excel usando um tipo de projeto de Tempo de Execução Compartilhado e um tipo de script JavaScript .

Compartilhar o estado entre as funções personalizadas e o código do painel de tarefas

Criar funções personalizadas para obter ou armazenar o estado compartilhado

1. Em Visual Studio Code, abra src/functions/functions.js.

2. No início do arquivo, adicione o seguinte código. Este código inicializa uma variável global chamada sharedState.

   window.sharedState = "empty";
   

3. Adicione o código a seguir para criar uma função personalizada que armazena valores em sharedState.

   /**
    * Saves a string value to shared state with the task pane
    * @customfunction STOREVALUE
    * @param {string} value String to write to shared state with task pane.
    * @return {string} A success value
    */
   function storeValue(sharedValue) {
     window.sharedState = sharedValue;
     return "value stored";
   }
   

4. Adicione o código a seguir para criar uma função personalizada que obtém o valor atual de sharedState.

   /**
    * Gets a string value from shared state with the task pane
    * @customfunction GETVALUE
    * @returns {string} String value of the shared state with task pane.
    */
   function getValue() {
     return window.sharedState;
   }
   

5. Salve o arquivo.

Criar controles do painel de tarefas para trabalhar com dados globais

1. Abra src/taskpane/taskpane.html.

2. Após o elemento de fechamento </main> , adicione o HTML a seguir para criar controles que armazenam e recuperam dados globais.

   <ol>
     <li>
       Enter a value to send to the custom function and select
       <strong>Store</strong>.
     </li>
     <li>
       Enter <strong>=CONTOSO.GETVALUE()</strong> into a cell to retrieve it.
     </li>
     <li>
       To send data to the task pane, in a cell, enter
       <strong>=CONTOSO.STOREVALUE("new value")</strong>
     </li>
     <li>Select <strong>Get</strong> to display the value in the task pane.</li>
   </ol>
   
   <p>Store new value to shared state</p>
   <div>
     <input type="text" id="storeBox" />
     <button onclick="storeSharedValue()">Store</button>
   </div>
   
   <p>Get shared state value</p>
   <div>
     <input type="text" id="getBox" />
     <button onclick="getSharedValue()">Get</button>
   </div>
   

3. Antes do elemento de fechamento </body> , adicione o script a seguir para lidar com os eventos de botão Store e Get .

   <script>
     function storeSharedValue() {
       let sharedValue = document.getElementById('storeBox').value;
       window.sharedState = sharedValue;
     }
   
     function getSharedValue() {
       document.getElementById('getBox').value = window.sharedState;
     }
   </script>
   

4. Salve o arquivo.

5. Compile o projeto.

npm run build

Experimente compartilhar dados entre as funções personalizadas e o painel de tarefas

1. Inicie o projeto.

npm run start

1. No painel de tarefas, insira um valor e selecione Armazenar.
2. Em uma célula do Excel, Enter =CONTOSO.GETVALUE() para recuperar o mesmo valor.
3. Em outra célula, enter =CONTOSO.STOREVALUE("new value") para atualizar o valor compartilhado.
4. No painel de tarefas, selecione Obter para exibir o valor atualizado.

Quando você estiver pronto para interromper o servidor de desenvolvimento e desinstalar o suplemento, execute o comando a seguir.

npm run stop

Confira também

• Tutorial de funções personalizadas do Excel
• Configurar seu Suplemento do Office para usar um tempo de execução compartilhado