The function setValue takes three parameters, newValue, newInfo and newColor. And the properties width and height represent the initial width and height of the custom widget.Īnd then the script methods of the Gauge Box are defined: The property color represents the color of the Gauge Box. The property info represents the title of the Gauge Box. The property value represents the value in percentage of the Gauge Box. Moving on, these are the properties of the Gauge Box custom widget: value, info, color, width and height. The third Web Component is the Builder Panel of the Gauge Box as indicated by the kind of “builder”. The second Web Component is the Styling Panel of the Gauge Box as indicated by the kind of “styling”. The first Web Component is the actual Gauge Box as indicated by the kind of “main”. The Gauge Box custom widget is composed of the following three Web Components: The Gauge Box custom widget has the unique ID, version, and the name, which is displayed in the analytics designer, Styling Panel. Custom Widget JSON of Gauge Box (box.json) Icon of the Gauge Box in any 16×16 pixel icon.ġ. Web Component JavaScript file of the Builder Panel of the Gauge Box. Web Component JavaScript file of the Styling Panel of the Gauge Box. Web Component JavaScript file of the Gauge Box. The Gauge Box custom widget consist of three Web Components: the actual Gauge Box, the Styling Panel and the Builder Panel of the Gauge Box and it consist the following files: Assume that your web server address is : Create a Custom Widget You need a web server that hosts the resources of the custom widget files (JavaScript files, CSS files, images, and so on). The Builder Panel of a custom widget is an area in analytics designer where you can set property values of the custom widget at design time. Web Component JavaScript of Builder Panel (optional).The Styling Panel of a custom widget is an area in analytics designer where you can set property values of the custom widget at design time. Web Component JavaScript of Styling Panel (optional).It has the lifecyles: constructor(), onCustomWidgetBeforeUpdate(), onCustomWidgetAfterUpdate(), connectedCallback(). The custom widget JSON file specifies the custom widget properties like id, version, name, description and so on.Ī custom widget is composed of one or more Web Components.Įach Web Component is implemented in a Web Component JavaScript file, which defines and registers a custom element and implements the custom element’s JavaScript API. Custom WidgetsĬustom widget consists of the following files: The Web Components are made of HTML, CSS and JavaScript. Setting the view property will affect any time-aware layer in the view.In this tutorial, we will build a simple custom widget in SAP Analytics Cloud, Analytics Application to show the gauge chart as shown below.Ī custom widgets are implemented as Web Components.
The TimeSlider widget will update the view's timeExtent whenever the time slider's timeExtent changes. We are setting the view property on the time slider widget. The sample uses this default mode, meaning that slider will show precipitation data that falls within a given time range, which is 6 hours in this case. The default mode for the time slider is time-window. There are four different mode options when initializing the TimeSlider widget: instant, time-window, cumulative-from-start, and cumulative-from-end. Visit the portal item description page for more information. National Digital Forecast Database produced by the National Weather Service.
The map displays the Quantitative Precipitation Forecast (QPF) for the next 72 hours across the contiguous United States. It uses an instance of FeatureLayer to visualize incremental precipitation forecast for next 72 hours across the contiguous United States with 6-hour interval. The TimeSlider widget simplifies the process of visualizing temporal data in a This sample demonstrates how to use TimeSlider widget with minimal configuration. Explore in the sandbox Open in CodePen View live
0 kommentar(er)
