SAC Custom Widget - Use of NavigationUtils in Code (from standard Type Library)

[mfrieser]

Hello everyone,

I am developing a custom widget for the SAC and want to use the Analytics Designer API (https://help.sap.com/doc/958d4c11261f42e992e8d01a4c0dde25/release/en-US/index.html).

In my case I want to be able to change the viewed story from the inside of my custom widget code. So I defined a function that looks like this:

class Widget extends HTMLElement {

changeStory(storyId,pageId){

NavigationUtils.openStory(storyId,pageId);

}

...

}

The problem that I face is that the call of the "changeStory"-function throws following error: Uncaught ReferenceError: NavigationUtils is not defined.

Now my question is how I could access the NavigationUtils Component from the inside of my code (https://help.sap.com/doc/958d4c11261f42e992e8d01a4c0dde25/release/en-US/index.html#NavigationUtils).

Thanks and best regards

Michael

[Bob0001]

Depends on your case. If the method does not need access to the DOM you can implement it in contribution JSON (see https://help.sap.com/docs/SAP_ANALYTICS_CLOUD/0ac8c6754ff84605a4372468d002f2bf/bde41c0b637b49fbb4e79.... There you have access to type libraries you imported (https://help.sap.com/docs/SAP_ANALYTICS_CLOUD/0ac8c6754ff84605a4372468d002f2bf/0dab4c7d40e64ee0b3017f06d983f3da.html). NavigationUtils is in standard library, which is always included.

[mfrieser]

Hello Bob,

thanks for your answer.

in my case, the method needs access to the DOM. Any other hints?

Best regards

Michael

[Bob0001]

You could put the part where you need DOM access into a dedicated method which you implement in the web component and call that one from the other method. Not sure whether there are other options.

var value = this.getSomethingFromDom()
var url = // do something with value
NavigationUtils.openStory(...)

[vishalakshmi]

Hello Michael,

You may need to reference the API script in your HTML file or import it using a module system if you are using one.

// Import the Analytics Designer API (Example, actual path may vary)

import { NavigationUtils } from '@sap/analyticsdesigner';

SAC widgets often require proper initialization. Ensure that your widget is initialized correctly and that the Analytics Designer API is available at the time your widget is created.

class Widget extends HTMLElement {

constructor() {

super();

// Initialize your widget and the Analytics Designer API

// Ensure proper initialization steps are taken here

}

changeStory(storyId, pageId) {

// Use NavigationUtils.openStory here

NavigationUtils.openStory(storyId, pageId);

}

// Other widget code...

}

If you're encountering issues with undefined components, it might be due to the timing of when your widget code is executed. Make sure that you're accessing the NavigationUtils component after the necessary dependencies have loaded.

Ensure that your custom widget is compatible with the version of SAC you are using and that the API you are trying to access is available in that version.

Thanks,

Lakskhmi.