Can't get widget-toolbar to show up

  • 2
  • Question
  • Updated 4 years ago
  • Answered
  • (Edited)
I'm attempting to create a widget and a settings page for said widget.

The instructions on how to create the settings page, and insert the "widget-toolbar" have me stumped.

The settings page instructions make no mention of an "index.html" being needed when creating a widget, and seemingly state that the toolbar can simple be dropped in.

The "Widget Button Toolbar" guide page makes mention of including...
"components/widget-settings-ui-components/dist/js/angular/widget-button-toolbar.js"
in my index.html page.

What "index.html" page?  Should my "settings.html" be named "index.html"?

Seems as if one of these two pages are lacking some detail.
Photo of OC Zingo

OC Zingo

  • 220 Points 100 badge 2x thumb

Posted 4 years ago

  • 2
Photo of Stuart Lees

Stuart Lees, Employee

  • 586 Points 500 badge 2x thumb
You do not need to name it to "index.html", you are fine with "settings.html". Our Widgets do consistently use "settings.html" as the file name for the settings, but it is not restricted to this name. 

The mentioning of "index.html" is really just to emphasize importing the source so the component will work properly in your page. 

Thanks
Photo of OC Zingo

OC Zingo

  • 220 Points 100 badge 2x thumb
So.... any clues on why the toolbar is not showing?
I have:
  <script src="components/widget-settings-ui-components/dist/js/angular/widget-button-toolbar.js"></script>

in my HTML file and which points to the downloaded script.

Using:
   <widget-button-toolbar save="saveSettings()" cancel="closeSettings()"></widget-button-toolbar>

The page shows nothing.

This is specifically following the directions on the "Building a Widget" and "Widget Button Toolbar" pages.
(Edited)
Photo of Stuart Lees

Stuart Lees, Employee

  • 586 Points 500 badge 2x thumb
The Widget Button Toolbar is a custom Angular directive and thus it would need to be included in your app dependencies. For example:

angular.module("risevision.widget.my-widget.settings", [
  "risevision.common.i18n",
"risevision.widget.common",
"risevision.widget.common.widget-button-toolbar"
]);
Photo of OC Zingo

OC Zingo

  • 220 Points 100 badge 2x thumb
Thanks.
I'm quite the noob to Angular.

For those of us trying to learn Rise Vision and Angular, your answer above would be greatly appreciated in the documentation.