SuperWidgets

SuperWidgets provide the ability to easily integrate visualizations and dashboards, built using Discovery Module technology such as Dataviews and the Thinkspace, into Logi Info and other applications.

 

About SuperWidgets

 SuperWidgets have been deprecated in Logi Info v12.6. SuperWidgets are client-side components, such as charts and dashboards, that can be used and re-used in applications.

Don't confuse SuperWidgets with Logi Info's legacy Widget definitions. SuperWidgets use a completely different technology. As client-side components, SuperWidgets don't need to use iFrames for integration into applications. They use Dataviews (see Dataview Authoring) as their data sources and use the Thinkspace (see Use the Thinkspace - v3.x) for creating and editing them. SuperWidgets work with these browsers: Chrome 26+, IE 11+, Edge, Firefox 20+, and Safari 7+.  

SuperWidgets can be saved and integrated into applications as standalone visualizations that can be zoomed, drilled-into, and exported, as shown above left, or as visualizations in a Thinkspace, with all its customization controls included.  

Visualization widgets can be combined into dashboards that are themselves saved as widgets, as shown above, and that can be presented in applications. Visualizations in the dashboards are completely interactive.

Back to top

 

Launching the SuperWidget Authoring Tool

You launch the SuperWidget Authoring tool from within Logi Studio: 

On Studio's Tools tab, you'll find the SuperWidget Authoring menu item, circled above. This menu item will only be visible if Discovery Module v3.0+ / Logi Platform Services has been installed and you have an appropriate license. The tool will open in your default browser: 

You'll be presented with the Login page, shown above. Enter either the "admin" password that was established when Discovery Module v3.0+ / Logi Platform Services was installed, or similar credentials, and click Login to access the tool. You can also reach the tool outside of Studio, by entering the URL in your browser (assuming a Discovery Module 3.0+ / Logi Platform Services installation with default parameters):

http://localhost:3000/analysis-components/assets/widgets/logiwizard.html#/main

Back to top

 

Managing Widgets

The SuperWidget Authoring Tool home page will appear:  

Existing widgets are displayed as "tiles", as shown above, with a thumbnail image of the visualization. Each tile has a Gear icon, circled above, that presents a menu when clicked. The menu items allow you to open the widget for editing, to get its ID and embedding code (discussed in detail in a later section), and to delete it. Notice that there are several kinds of tiles being displayed. The first two are a visualization and a visualization plus its Thinkspace controls. You can see examples of this by looking at the left tiles above: the Stock by Category tile is the visualization and, below it, the Stock by Category TS tile is the same visualization with the Thinkspace. Adding the "TS" to the widget title was simply a customization for clarity, not something that's automatic.

Another kind of tile represents an HTML Widget, which lets you include content using an iFrame. Widgets that will be directly embedded into an application can be any variety, with or without the Thinkspace. But widgets that will be used in a dashboard cannot have Thinkspace controls.

Back to top

 

Creating Widgets

To create a new widget, click the Create Widget tab:

Your first task is to select a Dataview to work with. Pick one from the list and click Select.

The Thinkspace tool will open, with the data from the Dataview you selected, as shown above. Detailed instructions for using the Thinkspace can be found in Use the Thinkspace - v3.x. In addition to the Dataview selection controls, this interface includes several special buttons.

  1. Save Thinkspace - Click to save your work. The visualization (with the Thinkspace controls) will be saved and appear as a tile in the Home page.
  2. Properties Editor - Click to edit the widget properties, including title, header, and styling, and to control the visibility of individual Thinkspace controls:


     
  3. Done - Click to return to the Home page.
  4. Add to Infoboard - Click to save the visualization (without the Thinkspace controls) and it will appear as a tile in the Home page. These visualizations are available for use in creating a dashboard.
  5. Update - Click to save your work when you've edited a visualization.

Like all objects created using Discovery / Logi Platform Services, widgets are saved in the platform database.

Back to top

 

Creating HTML Widgets

An HTML Widget allows you to include content not created with Logi Platform Services in a widget that uses an iFrame.

To create a new HTML widget, click the Create HTML Widget tab:  

Enter the URL of the content you want to include in the widget, a shown above, and click Apply. The tab are should fill with the content.

 Note that some content may be hosted with a same-origin policy, which will prevent it from being included in this fashion.

Click Save Widget, provide a title and, optionally, a description, and click Done, as shown above. 

When you return to the Home tab, you'll see that your new HTML Widget has been added to it, as shown above. Like other objects created using Discovery/Logi Services, HTML Widgets are saved in the platform database.

Back to top

 

Creating Dashboards

To create a new dashboard, click the Create Dashboard tab:  

The controls available include:

  1. Save - Click to save your work. The dashboard itself will be saved as a widget and appear as a tile in the Home page.
  2. Properties Editor - Click to edit the widget properties, including title, header, and styling:


     
  3. Done - Click to return to the Home page.
  4. Title - Click the "pencil" icon to edit the default title.
  5. Edit/Preview - Click to switch modes. In Preview mode, editing controls are not displayed.
  6. Open Infoboard - (Edit mode) The Infoboard, a slide-open panel revealed when you click the icon, is a gallery of the available widgets.
  7. Open Filter Widgets - (Edit mode) A slide-open panel revealed when you click the icon, is a gallery of the available standard widgets.

Adding Widgets to the Dashboard

To add your visualization or HTML widgets to a new dashboard, open the Infoboard and find the widget you want to use. 

Drag-and-drop the widget from the Infoboard onto the dashboard, as shown above.

Once dropped, the widget expands, gets its data, and renders its visualization, as shown above. Three icon appear on the widget in Edit mode that let you set filtering (more about this later), edit/rename the widget, and remove the widget from the dashboard. These icons do not appear in Preview mode or at runtime.

The widgets in the Infoboard have their own Gear icons, with menus options that let you open the widget in the Thinkspace, for editing, or delete it entirely from your collection of widgets. Find the next widget you want to add to the dashboard. You can use the same widget multiple times in the same dashboard. For example, one instance could be normal and the other zoomed in on specific data. 

Drag the next widget onto the dashboard and "drop zones" will appear, as shown above. Drop the widget onto one of them to place it above, below, left of, or right of the first widget. 

The result is shown above. You can continue to add widgets as desired and they'll be automatically scaled to fit the space. Due to space constraints, you can only place four widgets side-by-side across the dashboard.  

You can have different numbers of widgets in different rows, however, as shown above. 

Once you start adding widgets to the dashboard, the Save button, shown above, will be enabled. Click it to save the dashboard to its own widget, which will appear on the Home page with the visualization widgets. 

Resizing and Rearranging Widgets

You can resize and rearrange the widgets in a dashboard, as follows: 

A gray "resizing bar" separates the widgets, as shown above. If you have several rows of widgets, there will also be horizontal resizing bars. Place your cursor on the bar and drag it to resize the widgets. 

To rearrange widgets, click a widget title area and begin to drag. Drop zones will appear around all of the widgets, as shown above. Drop the widget in the desired location.

Back to top

 

Adding Filtering Widgets to the Dashboard

The dashboard editing tool includes several built-in filtering widgets and they can be added to a dashboard and configured to filter one or more visualization widgets. To add filtering widgets to a dashboard, open the built-in widgets panel and find one of widgets you want to use.

In the example shown above, the List Filter Widget is being dragged onto a drop zone in the dashboard.  

The widget will expand in place and can be moved, resized, and deleted just like other widgets. Click its Gear icon to open its settings panel: 

Configuration options will vary by filter widget type, but the example above is typical. The options above include:

  1. Caption - Specifies the caption that will appear for this widget.
  2. Selection Type - Specifies whether the filtering values will be appear in a simple list, filling the panel, or a drop-down list.
  3. Selection Mode - Specifies whether multiple filtering values can be selected, and whether a search feature is available.
  4. Select Data - Specifies the Dataview whose data will be filtered.
  5. Display Column - Specifies the data column that will supply text shown in the selection list.
  6. Value Column - Specifies the data column that will be targeted by the filtering.
  7. Include "No Selection" - Specifies if the list will include a "blank" entry and, if so, what its text will be.

Click Apply to save the filter configuration. Once the filter has been configured, a new icon for connecting the filter to visualization widgets will appear at the top: 

Click the Link icon, circled above, to open the Filter Parameter Settings panel, which is where you select the visualization widgets that will be filtered. Use the icons to add and remove target widgets. The list of target widgets only includes those that have been created using the same Dataview as the one specified for this filter. Click Done when ready.  

A faster way to select target widgets is to use the Blue Dot Connecter, as shown above, to make the connections. The visualization widgets available for filtering (those using the same Dataview) will temporarily turn pink as you start to drag the Blue Dot. Once connections have been made, the Link icon will turn red. 

As you select Category filter values, they're applied to all of the visualization widgets linked to the filter, as shown above. 

Back to top

Using Widgets in Logi Info Apps

Now that we have a collection of visualization and dashboard widgets, it's time to use them an application. Let's start by using a visualization widget in a Log Info application, using these steps:

  1. Ensure that your application version is Logi Info v12.5+ and Discovery Module v3.0+ is installed, with an SSM 12.5 license.
  2. Ensure that you have a configured Connection.Logi Application Services element in your application's _Settings definition.

    If its Logi Applicaton Service Authentication Type attribute is blank or configured for Standard authentication and the Username and Password attributes have valid values, there is no requirement for a Security element. However, if the authentication type is configured for TrustedAccess, then you must have a Security element in place to rovide user authentication.


  3. Add a SuperWidget element in an appropriate place in your Logi report definition, similar to the example above. If you can't find this element in Logi Studio, then you need to review Step #1. Configure the SuperWidget appropriately and click the browse button at the end of the Widget Config ID attribute value to display the SuperWidget Selector dialog box:


    This dialog box contains an entry for every widget you built with the SuperWidget Authoring tool. Select the one you want to use in your report and the dialog box will close and the widget's GUID will be filled-in back in the attribute value.


  4. Save and browse your report and, as in the example above, your visualization widget should be included. The widget is fully-functional, with live Explorer features, and is not embedded in an iFrame. That's all there is to it.  

You should be aware that the widget is sensitive to the Logi Theme being used in your application and may display with different colors or fonts as a result. 

Using SuperWidget Parameters

You can dynamically change many of the properties of the widget and change data filtering at runtime using parameters. First, let's see how we can use a parameter for a widget property: 

  1. In the widget editor, find the desired property (in this example, the Visualization Title) and enter a small piece of parameter "placeholder" code as its value, as shown above. The code format is:

    ${ req.query.<paramName> ! <defaultValue> }

    Click Apply and Update to save your changes.


  2. Add a SuperWidget Params child element, shown above, to your definition and create a name-value pair for the parameter name identified in the code. Parameter values must be in the correct format for the property and may be tokens.

At runtime, the visualization's title will be the parameter value text. If there is no parameter value (for example, if a token is used for the value and it evaluates to nothing) then the default title value "Stock by Category" will be used. 

Now let's see how we can use the same technique to create dynamic filters: 

  1. In the widget editor, open the Filters panel and create a new filter for the data table by dragging-and-dropping the CategoryName column pill into it. As shown in the example above, we're going to create a filter that includes individual categories by name. In the filter definition panel, select the operator, Equals, and enter the same piece of code we used earlier as the comparison value:

    ${ req.query.myCategory ! * }
     
  2. The code is slightly different in this context: instead of a "default value", we use an asterisk ("*") in the code to represent all values. This serves the same purpose by providing a guarantee that all values will be included if the parameter is empty.

     Operators that compare value lists (In, Not In) may not be used with filter parameters.

    Click Apply and Update to save your changes.

  1. Add a SuperWidget Params child element, shown above, to your definition and create a name-value pair that corresponds to the parameter name you used in the filter code. Parameter values must be in the correct format for the property and may be tokens.

At runtime, the visualization will be filtered to include only the CategoryName data identified in the parameter value, represented above by a token. If there is no parameter value then all CategoryName data will be included. 

Adding a Visualization Widget with Thinkspace

Let's do that again but add one of our widgets that was saved with the Thinkspace controls. Go back to your report definition and open the SuperWidget Selector dialog box again. Select one of the widgets that included the Thinkspace, and you may need to make the SuperWidget element's Height and Width attributes more generous. Save your definition, and run the report. 

Now you should see your visualization inside a complete, working Thinkspace, as shown above, with "live" controls. Remember that the availability of that some of the features of the Thinkspace, including the Dataview selector and data table Filters, Calculated Columns buttons, etc. are configurable in the widget settings. You can use the Thinkspace controls now to change the visualization widget in many ways and then you can save your customized version as a new widget or add it to the Infoboard, using the buttons provided. However, you cannot update the underlying widget from here; it remains unchanged and usable again in its original form. 

Adding a Dashboard Widget

And, finally, let's do that again with a Dashboard widget and, once again, you may need to make the SuperWidget element's Height and Width attributes more generous. Save your definition, and run the report.

Now you should see your dashboard, as shown above, with "live" controls. Panels can be moved, filters changed, etc. at runtime.

Back to top

Using Widgets in Non-Logi Apps

You can also directly embed these widgets into HTML pages and non-Logi applications, using JavaScript. In the following example, we'll assume that Logi Info and the Discovery Module are installed on a web server named "Jupiter". We'll also assume that the HTML page that will embed a widget is being served from "Nomad12". Here are the steps necessary to embed a widget in an HTML page:

  1. On Jupiter, modify the settings file to accept a request from Nomad12. Assuming a default installation location, the file is:

    C:\LogiAnalytics\Discovery\platform\settings\logiApplicationService.json

    {
      "disableSchemaValidation": false,
     "logiApplicationService": {
        "description": "Platform logiApplicationService Configuration",
        "logLevel": "error",
        "corsOriginWhiteList": "http://Nomad12",
        "accessTokenGracePeriod": 120,
        "system": {
          "pollingIntervalSeconds": 15,
          "pollingTimeoutMinutes": -1
        },

  2. Find the corsOriginWhiteList entry, highlighted above, and change it to accept requests from Nomand12. Save the file. Note that the "*" wild-card value will not work in this situation - you must provide a value.

  3. Stop and restart the Logi Application Service and Logi Data Service services or daemons, shown above.

  4. On Jupiter, find, copy, and save the ID of the widget you want to embed. This can be found in several places, including the SuperWidget Authoring Tool in Logi Studio, as shown above, or through the SuperWidget element's widget selector, which was used at the top of this page.
     
  5. Here's the format of the JavaScript you'll add to your HTML page on Nomad12, in the page body wherever you want the widget to appear:
     
  6. <script
    src="http://hostServer:port/api/platform/system.configs/widgetID?interpolate=true&amp;$format=application/javascript">
    </script>

    The example below shows the script with the values for our example filled in.

    <script
    src="http://Jupiter:3000/api/platform/system.configs/vdd1c55be-0eb0-4afc-b10a-34b2ab4ad7f8?interpolate=true&amp;$format=application/javascript">
    </script>

    Other <script> tag parameters are also valid, such as:

    id="myID" style="width:800px; height:700px;" theme="Arizona"

  1. Browse your HTML page and the widget will appear in it. 

 Note that users will be required to log in to the widget the first time they browse the page and again if their session expires. 

Back to top