Excel add-in in Angular featuring exclusive custom functions

Question

Excel add-in in Angular featuring exclusive custom functions

I've recently embarked on the journey of developing Office Add-ins, using public code samples to simplify the process. Currently, I am exclusively testing with the web version of Excel.

My goal is to merge the functionality of two sample add-ins: one built with Angular framework using Typescript and another with custom functions using Typescript provided by yo office. Both samples work flawlessly when tested individually.

To achieve this, I took the .ts, .json, and .html files from the custom functions add-in and placed them in the task pane add-in folder. Subsequently, I merged the dependencies of both add-ins and edited the manifest.xml following the example of the AsyncStorage sample (https://github.com/OfficeDev/PnP-OfficeAddins/blob/master/Excel-custom-functions/AsyncStorage/).

Although the task pane works normally, the custom functions are not appearing as expected. Here's a snippet of my manifest.xml:

<!-- Inserted manifest.xml data here -->

What could be causing this issue?

angular typescript office-js excel-addins custom-functions-excel

Answer 1

Answer №1

If you execute 'npm start', the root folder of your web service will be located at 'https://localhost:3000'. However, it may not acknowledge the existence of the 'src' folder. In such cases, you must update all references containing '/src/' in their paths to a location within your output folder that is relative to the root of the web service.

To simplify the process for 'JSON-URL', 'JS-URL', 'HTML-URL', consider following these steps:

Firstly, run 'npm run build' on your custom functions project and transfer the files 'index.win32.bundle' (found in the 'dist/ship/win32' directory, representing the custom functions JavaScript) and 'customfunctions.json' directly from your separate custom functions project to the 'assets' folder of your integrated solution. Rename 'index.html' as 'customfunctions.html' to prevent confusion and also move this file to the assets folder. Subsequently, reference these files in the manifest as shown below:

<bt:Url id="JSON-URL" DefaultValue="https://localhost:3000/assets/customfunctions.json"/>
<bt:Url id="JS-URL" DefaultValue="https://localhost:3000/assets/index.win32.bundle"/>
<bt:Url id="HTML-URL" DefaultValue="https://localhost:3000/assets/customfunctions.html"/>

While this may not be the definitive solution, it can serve as an effective starting point for your implementation.

Answer 2

If you execute 'npm start', the root folder of your web service will be located at 'https://localhost:3000'. However, it may not acknowledge the existence of the 'src' folder. In such cases, you must update all references containing '/src/' in their paths to a location within your output folder that is relative to the root of the web service.

To simplify the process for 'JSON-URL', 'JS-URL', 'HTML-URL', consider following these steps:

Firstly, run 'npm run build' on your custom functions project and transfer the files 'index.win32.bundle' (found in the 'dist/ship/win32' directory, representing the custom functions JavaScript) and 'customfunctions.json' directly from your separate custom functions project to the 'assets' folder of your integrated solution. Rename 'index.html' as 'customfunctions.html' to prevent confusion and also move this file to the assets folder. Subsequently, reference these files in the manifest as shown below:

<bt:Url id="JSON-URL" DefaultValue="https://localhost:3000/assets/customfunctions.json"/>
<bt:Url id="JS-URL" DefaultValue="https://localhost:3000/assets/index.win32.bundle"/>
<bt:Url id="HTML-URL" DefaultValue="https://localhost:3000/assets/customfunctions.html"/>

While this may not be the definitive solution, it can serve as an effective starting point for your implementation.

Answer 3

Answer №2

After multiple attempts, I decided to start fresh by following a different example from https://github.com/OfficeDev/Excel-Custom-Functions, which included both task pane and custom functions. It finally appears to be functioning correctly, although I am still unsure about what the initial issue was. Below is my functional manifest.xml:

<?xml version="1.0" encoding="UTF-8"?>
<OfficeApp
          xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0"
          xmlns:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides"
          xsi:type="TaskPaneApp">

  <!-- Begin Basic Settings: Add-in metadata, used for all versions of Office unless override provided. -->

  <!-- IMPORTANT! Id must be unique for your add-in, if you reuse this manifest ensure that you change this id to a new GUID. -->
  <Id>0decaece-0d07-4d70-ba89-c8e4d742f7f2</Id>

  <!--Version. Updates from the store only get triggered if there is a version change. -->
  <Version>1.0.0.0</Version>
  <ProviderName>[Provider name]</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
  <DisplayName DefaultValue="angular-cf" />
  <Description DefaultValue="[Workbook Add-in description]"/>

  <!-- Icon for your add-in. Used on installation screens and the add-ins dialog. -->
  <IconUrl DefaultValue="https://localhost:3000/assets/icon-32.png" />
  <HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/hi-res-icon.png"/>

  <!--If you plan to submit this add-in to the Office Store, uncomment the SupportUrl element below-->
  <!--<SupportUrl DefaultValue="[Insert the URL of a page that provides support information for the app]">-->

  <!-- Domains that will be allowed when navigating. For example, if you use ShowTaskpane and then have an href link, navigation will only be allowed if the domain is on this list. -->
  <AppDomains>
    <AppDomain>AppDomain1</AppDomain>
    <AppDomain>AppDomain2</AppDomain>
    <AppDomain>AppDomain3</AppDomain>
    <AppDomain>contoso.com</AppDomain>
  </AppDomains>
  <!--End Basic Settings. -->

  <!--Begin TaskPane Mode integration. This section is used if there are no VersionOverrides or if the Office client version does not support add-in commands. -->
  <Hosts>
    <Host Name="Workbook" />
  </Hosts>
  <DefaultSettings>
    <SourceLocation DefaultValue="https://localhost:3000/index.html" />
  </DefaultSettings>
  <!-- End TaskPane Mode integration.  -->

  <Permissions>ReadWriteDocument</Permissions>

  <Requirements>
    <Sets DefaultMinVersion="1.1">
        <Set Name="CustomFunctionsRuntime" MinVersion="1.1"/>
    </Sets>
  </Requirements>  

  <!-- Begin Add-in Commands Mode integration. -->
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">

    <!-- The Hosts node is required. -->
    <Hosts>
      <!-- Each host can have a different set of commands. -->
      [...]
    </Hosts>

    <!-- You can use resources across hosts and form factors. -->
    <Resources>
      <bt:Images>
        [...]
      </bt:Images>
      <bt:Urls>
        [...]
      </bt:Urls>
      <!-- ShortStrings max characters==125. -->
      […]
    </Resources>
  </VersionOverrides>
  <!-- End Add-in Commands Mode integration. -->

</OfficeApp>

Answer 4

After multiple attempts, I decided to start fresh by following a different example from https://github.com/OfficeDev/Excel-Custom-Functions, which included both task pane and custom functions. It finally appears to be functioning correctly, although I am still unsure about what the initial issue was. Below is my functional manifest.xml:

<?xml version="1.0" encoding="UTF-8"?>
<OfficeApp
          xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0"
          xmlns:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides"
          xsi:type="TaskPaneApp">

  <!-- Begin Basic Settings: Add-in metadata, used for all versions of Office unless override provided. -->

  <!-- IMPORTANT! Id must be unique for your add-in, if you reuse this manifest ensure that you change this id to a new GUID. -->
  <Id>0decaece-0d07-4d70-ba89-c8e4d742f7f2</Id>

  <!--Version. Updates from the store only get triggered if there is a version change. -->
  <Version>1.0.0.0</Version>
  <ProviderName>[Provider name]</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
  <DisplayName DefaultValue="angular-cf" />
  <Description DefaultValue="[Workbook Add-in description]"/>

  <!-- Icon for your add-in. Used on installation screens and the add-ins dialog. -->
  <IconUrl DefaultValue="https://localhost:3000/assets/icon-32.png" />
  <HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/hi-res-icon.png"/>

  <!--If you plan to submit this add-in to the Office Store, uncomment the SupportUrl element below-->
  <!--<SupportUrl DefaultValue="[Insert the URL of a page that provides support information for the app]">-->

  <!-- Domains that will be allowed when navigating. For example, if you use ShowTaskpane and then have an href link, navigation will only be allowed if the domain is on this list. -->
  <AppDomains>
    <AppDomain>AppDomain1</AppDomain>
    <AppDomain>AppDomain2</AppDomain>
    <AppDomain>AppDomain3</AppDomain>
    <AppDomain>contoso.com</AppDomain>
  </AppDomains>
  <!--End Basic Settings. -->

  <!--Begin TaskPane Mode integration. This section is used if there are no VersionOverrides or if the Office client version does not support add-in commands. -->
  <Hosts>
    <Host Name="Workbook" />
  </Hosts>
  <DefaultSettings>
    <SourceLocation DefaultValue="https://localhost:3000/index.html" />
  </DefaultSettings>
  <!-- End TaskPane Mode integration.  -->

  <Permissions>ReadWriteDocument</Permissions>

  <Requirements>
    <Sets DefaultMinVersion="1.1">
        <Set Name="CustomFunctionsRuntime" MinVersion="1.1"/>
    </Sets>
  </Requirements>  

  <!-- Begin Add-in Commands Mode integration. -->
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">

    <!-- The Hosts node is required. -->
    <Hosts>
      <!-- Each host can have a different set of commands. -->
      [...]
    </Hosts>

    <!-- You can use resources across hosts and form factors. -->
    <Resources>
      <bt:Images>
        [...]
      </bt:Images>
      <bt:Urls>
        [...]
      </bt:Urls>
      <!-- ShortStrings max characters==125. -->
      […]
    </Resources>
  </VersionOverrides>
  <!-- End Add-in Commands Mode integration. -->

</OfficeApp>

Excel add-in in Angular featuring exclusive custom functions

Answer №1

Answer №2

Similar questions

Adding a Component in Ionic 3: Step-by-Step Guide

Alternatives to using wildcards in TypeScript

❴eslint_d❵ [eslint] Oops! It looks like there was an issue loading the 'import' plugin declared in your .eslintrc.js file

Add the JavaScript files to the components

Issue with deprecated TypeORM connection and isConnected functions

The process of Angular Ahead-of-Time (AoT)

Ensuring the accuracy of nested objects through class validator in combination with nestjs

Invoking a function within an Angular component

Avoiding memory leaks in Angular2+ when using Subscribers and subscribe.first() can be challenging

Checking an array of objects for validation using class-validator in Nest.js

The Google Maps feature encountered an error (ReferenceError: google is not defined)

What is the best way to make sure the background image adjusts to fit the browser window as it is resized?

Error encountered during unit testing: The function _reactRouterDom.useHistory.mockReturnValue is not a valid function

Trapped in a never-ending cycle caused by failing to dispatch an action within ngrx/effects

What is the best way to retrieve information from a dragged item in Material Design's drag and drop feature

Iterate through the complex array of nested objects and modify the values according to specified conditions

NG2-Charts are not rendering until the page is manually refreshed

Issue occurred while trying to render a React component with Typescript and WebPack

Adding a click functionality to a dynamically generated anchor tag in angular.js

An error occurred in the ngrx store with Angular during production build: TypeError - Unable to access property 'release' of undefined