ev|Apps Builder - H1.2016 - Release Notes


Contents
Note: This is a version release document.
  • Some of the screenshots may show a slight difference compared to the release version as we are constantly seeking to improve the design and usability up until the release date.
  • Product name - ev itsm.png minimum version required: 2016.1

         Open url.png  see FAQ & Knowns Errors

What's new in the core

Configuring widget properties in the URL

General principle

Now, you can modify certain parts of an app by defining its content using the URL.

Example documentation icon EN.png  In order to display a given incident form directly when an app is opened, you can pass its number as a parameter in the URL 

This system is based on the exposed properties of widgets that are accessible via the URL. You can access any of the properties using a dedicated parameter in the URL.

Note: Although this functionality is currently limited to certain properties, it will progressively be extended in future versions.

Use case

The app below is used to display employee forms. By default, the system displays the first record.

       partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m754e4723.png

To display any employee form via the URL, you should:

  • Go to the Employee List data source and configure the properties of the new Search section. Indicate the Search Field and the Search Value.
             partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m7ccfcf99.png
  • Open the Application properties window and click the new button [ Exposed Properties ] to configure the URL.
             partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_10838580.png
  • The window displays exposed properties. By default, no property is displayed.
             partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_24025c2a.png
  • Click [ Add properties ] to add properties filtered via the URL. All properties defined as accessible via the URL will be displayed for all widgets and data sources in the app.
             partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_281236f7.png
  • Tick the SearchValue property in the Employee List data source. Click [ Ok ]. The property will become an exposed property and can be passed as a parameter in the URL.
    Note: The checkboxes are used to expose several properties in one go.

       partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_ca52ffb.png

  • You can modify the existing value in the Content/Value column. To do so, double-click the column value and specify the value you want to display.
  • Click [ Generate URL ].
    • The corresponding URL will appear.
    • Click Execute URL application to check that the record is correctly displayed.
               partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_5a1745b.png
               partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m3a01dad7.png

Note:

  • In the URL, you can select:
    • The name of the parameter in the URL parameter alias column. By default, it is the name of the property. For security reasons, you should specify anonymous parameter aliases such as Param1, Param2, etc.
    • The content (variable in the URL) in the Content/Value column. You can then modify the content of the parameter via the program to display any employee form.
  • To ensure that the app can be run without a parameter, exposed properties should contain default values.
  • If a value is defined in the Search Value property for the widget or data source, it will be displayed by default in the exposed properties window.
             partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_3cea6e4c.png

Modification in the Share application URL window

A new button [ Exposed Properties ] added to this window enables you to access exposed properties.

Note: The URL displayed does not take parameters into account because the QR code must always be valid. As such, default values will be used.

       partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m53c229b1.png

Shortcuts

The behavior of shortcuts remains identical. You can add different parameters to shortcuts so that they automatically point to the app you want.

Version information on the login page

You can now see the Product name - ev sas.png version on the login page.

       partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m2315ac2e.png

Six languages supported for system messages

System messages can now be displayed in the six standard languages. As in earlier versions, users can select their language in the user information zone.

       partie 1 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m461e07e4.png

Developments in the studio

Duplicating elements

A duplication functionality has been added to pages, widgets and data sources. Note: Duplication is not authorized for composite data sources. 

  • You can run it:
    • Using the dedicated icon partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_75749322.png found next to each object that can be duplicated.
               partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m4615f918.png
    • Using the contextual menu of a widget placed in the Design pane.
               partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m7da1e563.png
  • Duplicated objects will be displayed in the list with the word (Copy).
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m23415dfe.png
  • The duplicated object will open directly in edit mode.
  • If you copy a widget, the duplicate widget will appear below the source widget in the Design pane. You can then move it just like other widgets.

Search

A search functionality has been added. It is available:

  • When you create new widgets or data sources, to enable you to access the type of object you want to add quickly. Note: The search is also run on custom widgets.
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_274fbf37.png
  • In the list of widgets and data sources, to enable you to access an existing object quickly.
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_5eddfff1.png

Information on evSM connectors in the About window

You can now see information on evSM connectors in the About window, namely the Product name - ev itsm.png version and the API.

       partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m1eaf57b7.png

Direct access to a page in container widgets

In page container widgets such as Tab and Sliding Page, a new icon partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m1f213687.png is used to indicate the page to be displayed in edit mode.

       partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m61ee7947.png

New WYSIWYG editor

This new editor manages constraints related to questionnaires and facilitates tag management.

       partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m4954ccdc.png

New way of inserting tags

You can now manage tags using a dedicated pane in the HTML editor. To do so, click the partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_mffd9cac.png icon. Tags are grouped in four categories available depending on the context.

       partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m3e45df38.png

  • Page category: Used to insert and configure a hyperlink.
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_25104e8b.png
    • Page Link: Used to replace the current page by opening the link in a new page.
    • Page Popup: Used to open the link in a popup window.

In both cases, you can define the configuration using the configuration pane.
         partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_76a83fee.png

  • Select the page you want from the Select page drop-down list.
  • Specify the text of the link in the Link title field.
  • Specify the title of the popup window in the Modal title field.
  • Indicate how the link should be displayed: Link for underlined text or Button for a button.
  • partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m17c16392.png to insert a new link.
  • Data Picker category: Used to select tags previously managed using the Data Picker.
    • Previous version
               partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m114d476b.png
    • New version:
      • Two panes are displayed consecutively. The first pane is used to select the field and the second to define the display settings.
                 partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m1b4299cd.png
      • The number of parameters displayed will depend on the type of field. Note: This is currently available only for EasyVista data sources. The Cell Value option is used to select a value in the Result table.
Text field Date field Numeric field
partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m448381de.png partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_7aaff15d.png partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_66cd4b2c.png
  • EasyVista category: Used to insert business tags from Product name - ev itsm.png using partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m17c16392.png found next to each element.
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m68d138c9.png
    • Document upload: Functionality described in the section on document uploads and downloads
    • New Request: When the data source points to the SD_CATALOG table, this is used to display a popup window containing the elements required for creating new service requests from a catalog entry (including questionnaires).
    • Embed Questionnaire: Similar to New Request, information is integrated in a drop-down pane.
    • Status Notification: The green notification banner indicates the status of the created request.
  • Star Rating: Used to display rating stars for knowledge base articles.
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_star_rating0.png          partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_star_rating.png

Importing and exporting custom widgets and themes

You can now import and export custom widgets and themes using a new functionality.

  • You perform an export using the contextual menu available in the list of custom widgets and themes in .tar.gz format, in the same way as you would export apps.
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_12a798f6.png
  • You perform an import using the [ Import ] button in the main toolbar of the App Gallery.
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_2ec4ad04.png
    • To avoid the import of malicious files, the security mechanism here is identical to the one applied when you import apps.
    • Caution:
      • Existing custom widgets or themes with the same name will be replaced by the imported ones.
      • Apps using custom widgets that have been replaced by imported ones will not be affected as their custom widgets were copied to the app.

Managing app favicons

The Application properties window has been modified. It now contains three tabs.

       partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_34e55dd4.png

  • Apps Icon: Icon of the app.
  • Apps Header: Text displayed in the title bar of the app in execute mode.
  • Favicon: Icon displayed in the browser's tab bar and shortcut icon of the app on mobile devices.
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_6103ee5c.png

You can provide each favicon in one or more resolutions to ensure its display is adapted to different devices.

  • You can also provide just one version of the favicon. The result will automatically be displayed in the Application properties window.
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m4a88c722.png
  • To modify the image in one of the resolutions, place your cursor on it to access the download functionality.
             partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_56a151ca.png

Editing application properties in the App Gallery

You can now access application properties directly in the App Gallery using a simplified window. This enables you to correct the connector when it prevents the opening of the app.

Note: The dedicated partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m1f213687.png icon will be visible only to users with the same access rights as those required for viewing the icon for editing apps.

       partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m1cb45e78.png

       partie 2 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m4666d803.png

Developments on the link with ev|ITSM

Update Incident wizard

General overview

A new wizard can now be used to update Product name - ev itsm.png incidents using a custom widget. It relies on new mechanisms for creating forms. These are currently reserved for EasyVista but in a future version, they will be integrated in the studio so as to enable users to customize native wizards or to create new ones.

  • The wizard must be associated with a button placed in a record belonging to the SD_REQUEST table.
  • Its behavior is identical to the one in Product name - ev itsm.png:
    • If the selected incident is closed, an error message will appear.
    • If this is not the case, then the contents of the Description field will be added to the end of the existing incident description.
    • Creation of a User Update action.
    • Update of the history of changes.

Use case

A list of Product name - ev itsm.png incidents is displayed using a Data Viewer widget.

  • Click [ Update Incident Record ] found in the form.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_264d5077.png
  • This runs the update wizard.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m5673bc41.png
  • Enter the description and click [ Send ]. The incident will be updated.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_4c51ab78.png
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m3220a672.png

Setting up the wizard

  • Create a new app called Incident Management.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_mb035bab.png
  • Add an EasyVista data source based on the list of incidents.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m5750c478.png
  • Add a Data Viewer widget for the list of incidents and a Secured HTML widget for the description of the current incident (Form display mode).
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m7849e629.png
  • Create a new page dedicated to the update wizard. Note: The box found to the left of the page name has not been checked. This ensures that the page remains invisible in the app menu.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m726954de.png
  • Insert the custom wizard, Update Incident Wizard. Note: Specify the maximum width of the window to restrict its size.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m11802754.png
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m1db2a333.png
  • The custom widget contains a Memo widget for entering the description and two Button widgets, [ Cancel ] and [ Send ]. Note: These three widgets are not available in the list of custom widgets because they belong to a specific forms category that will only be available in a future version. This category will be used for creating all types of data entry forms.
  • Check that the [ Send ] button is correctly configured as shown below.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_39ff0872.png
  • Add the button for calling the list of incidents to the Data Viewer widget displayed on the main page of the app:
    • In the new tag insertion window, configure the button for opening a popup window and click partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_507dcef.png.
               partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m1930c0f3.png
    • The HTML editor will be updated and the button will be aligned to the right of the window.
               partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_372ed84b.png

Managing document uploads and downloads

Document upload

You can access the document upload functionality in the dedicated pane for managing tags in the HTML editor. Its availability will depend on the context.
         Example documentation icon EN.png  Via a form in a Data Viewer widget (Form section)

Use case

  • Open the HTML editor in an object that allows the uploading of documents.
  • Click partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_mffd9cac.png to open the dedicated pane for managing tags.
  • Open the EasyVista category and click partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_507dcef.png next to the Document upload option. The instruction corresponding to the functionality will automatically be added to the editor.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_5eec40d7.png
  • In execute mode, an upload button is displayed. Note: The name of the button is identical to the one in Product name - ev itsm.png.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_3969879a.png

Document download

Caution

  • This functionality requires the presence of two EXP files in Product name - ev itsm.png to set up the views for managing document downloads: one EXP for the link with the SD_REQUEST and AM_ACTION tables and a second EXP for the link with other tables.
  • We recommend that you do not modify the filters and views shipped in the two files.
  • You can however rename the files.

       Download Zip icon.png  Download the EXP for the SD_REQUEST and AM_ACTION tables

       Download Zip icon.png  Download the EXP for the other tables

Case use

  • Add an EasyVista data source.
  • If both EXP files have been integrated, the Query drop-down list will contain two APPS - download document parent queries linked to the Product name - ev itsm.png Operation > Reports > Reports menu option.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_46225cf4.png
  • Select the query linked to the SD_REQUEST table.
  • Select the filter to be applied to the query. Note: The three filters are similar to the ones available in Product name - ev itsm.png.
    • My Attachments: Used to display only personal documents belonging to the logged-in user.
    • Public: Used to display only public documents.
               partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m415d1c2d.png
  • Using a (1,1) master-detail relationship, associate the data source with the main data source in SD_REQUEST for incidents.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_76ac08e5.png
  • Add a Data Viewer widget in Grid mode to display the list of documents available.
             partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_5c20a812.png
  • Switch to execute mode. In the list of documents:
    • When you click the name of a document, this will download it.
    • The Public column differentiates public documents from personal ones.
    • When you click partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_4b3b8755.png, this will delete a document. Note: If you do not want to display this functionality, remove the Delete column using the Data Transformer.

Selecting a service using elements in the New Request menu

In a Menu widget with a New Request subject, you can now select the service catalog subject directly based on the catalog instead of the table_path table.

This enables any new service added to Product name - ev itsm.png to become immediately available, unlike the table_path table that is usually refreshed once daily.

       partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m1813e15f.png

Managing variables and constraints in questionnaires

Questionnaires can now support the new functions added in the previous partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_40dd4f88.png version, namely, dynamic variables and constraints.

Constraints appear differently as regards Product name - ev itsm.png. When a constraint has not been respected, its error message will be displayed in red below the field.

       partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m3dc26e0b.png

New properties for the EasyVista data source

The EasyVista data source now integrates a Search section containing two new properties. These are used to filter the results for a given field (Search Field) and for a given value (Search Value).

Note: These properties are required when using the new URL configuration functionality, e.g. for direct access to a specific form in the app.

       partie 3 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m122c3c37.png

Developments in REST

Client REST interfaces have been modified considerably, to simplify and standardize them. 

General principle of REST datasource creation

Note: There are new developments in the REST features of this new version of Product name - ev sas.png. However, applications using the features from previous versions will continue to work.

  • Datasources should be based on one of two templates, both available in the Online category:
    • REST: existing datasource type. For direct creation of datasources used to create applications quickly.
    • REST (Connector): new datasource type. For creation of datasources based on a predefined connector, to take advantage of previously configured resources, and to use OAuth authentication.

      captures REST_html_57817716.png

  • Three types of REST authentication are now available, resulting in three types of datasources with corresponding configurations. The table below summarizes the options available according to the type of connector selected.
Datasource Type Authentication Type
None Basic OAuth
REST Datasource Creation Property OK icon.png Property OK icon.png Property NOK icon.png
Resources 1 1 Property NOK icon.png
Selector 1 1 Property NOK icon.png
REST (Connector) Datasource Creation Property OK icon.png Property OK icon.png Property OK icon.png
Resources n n n
Selector 1 per resource 1 per resource 1 per resource
  • The diagram below summarizes the legacy REST services, connectors and datasources.

      captures REST_html_mc08d89f.png

Developments in configuration interfaces

The configuration interfaces have been standardized and simplified. Cross-functionalities are also available (in particular in resource management, now extended to REST APIs with no authentication or Basic authentication).

Implementing REST datasources via connectors

REST interfaces are now fully supported by the system of connectors, enabling use of aliases and execution contexts. For example, this lets you develop REST applications on development accounts before passing them to production accounts, with no need to make any changes in the applications.

  • Click EVApps - GUI - Connector icon and open the Add Connector dialog.
  • Select the REST connector type.
             captures REST_html_m218980c.png
  • Select the type of authentication.
             captures REST_html_m25539be5.png

Common functionality in different types of authentication

1. Choosing a service:

  • From the URL drop-down box, choose from the list of registered services.
             captures REST_html_65b0c5e7.png
             captures REST_html_m7251bb49.png
  • If you select a REST API with no authentication or Basic authentication and the service is not registered, you can set it up for quick reference in the future.
             captures REST_html_m283103c2.png
    • Click Add icon.png.
               captures REST_html_m507f86dd.png
    • Enter the service name, URL and a shortcut icon.
  • To change or delete an existing service, click it to display the shortcut menu. Note: Services provided as standard cannot be changed or deleted.
             captures REST_html_m73b1d370.png

2. Resource management: This has been extended to include a default selector for a given resource.

  • In the Default Resource list, select the resource you want.
             captures REST_html_m77ceabc9.png
  • Click captures REST_html_m7f6b2e26.gif next to the field to open the resource management dialog. A list of the existing resources is displayed.
             captures REST_html_427ba4fd.png
  • Click on a resource to change its properties. Note: The full URL, including resources, appears clearly under the URI field.
             captures REST_html_m7c9f7ccf.png

3. Selector management: A default selector can be set for each resource. Note: This is highly recommended. 

  • Click captures REST_html_m1898989f.gif next to the Default Property OK field. The dialog box to choose a selector will be displayed.
             captures REST_html_m2939d0b8.png

4. URL variable management: The URL of the service must sometimes be customized to include information such as account or API_KEY.
      captures REST_html_m75bc307c.png

  • URLs can be customized by adding dedicated tags to the URL:
    • either in the form {tag_name} in the main part of the URL;
    • or using parameters beginning with ? or &
  • The system automatically reorganizes the URL to make it permanently valid (the parameters are always located at the end of the URL).
  • Each tag changes into an input field in the dialog box, to be completed when creating the connector. 

Example documentation icon EN.png  For the easyvista REST connector, the URL includes two parameters: hostname and account, which must be completed to validate the URL
https://{hostname}/api/v1/{account}/

  • It is also possible to add tags to the Resource field.
             captures REST_html_3a557901.png
  • As the resulting URL can often become complex, you can preview it by clicking on > to the right of the Preview field.
             Example documentation icon EN.png  https://xxxxxx.easyvista.eu/api/v1/80000/requests?max_rows=100
             captures REST_html_m3f22af77.png

REST connector with no authentication

      captures REST_html_m2c7a7d05.png

In the dialog box, enter the URL of the service and any resources.

REST connector with Basic authentication

      captures REST_html_69b3a33f.png

When connection information is entered, any datasource based on the connector also inherits that information.

 Notes

  • Information may be modified. 
  • If you do not want the information to be retrieved in the datasource, you must delete it.

REST connector with OAuth authentication

       captures REST_html_162805f9.png

Authentication is delegated to the service selected. 

Click captures REST_html_m1898989f.gif next to the Authentication parameters field to populate the corresponding information into the host application.

Creating datasources based on a REST connector

  • Select the connector you want.
             captures REST_html_m3fbc3581.png
  • The Properties Inspector will be displayed.
             captures REST_html_m797d0499.png
    • Fields marked captures REST_html_m34200d31.png can be populated automatically after selecting the connector (provided the fields have been completed for the connector).
    • Additional parameters (&) not available via the connector can be entered into the Additional Query String field.

Direct creation of REST datasources

No authentication

Functionality is unchanged. Simply enter the URI and set the correct selector to access the data.
         captures REST_html_3dbbfe2.png

Basic authentication

      captures REST_html_m35c678ba.png

List of new REST connectors supplied as standard

Basic authentication

      captures REST_html_2502d842.png

OAuth authentication

      captures REST_html_mdffcb42.png

Developments related to widgets

YouTube widget

This widget now offers a Loop property used to play the video in a continuous loop. The video will be replayed automatically once it reaches the end.

       partie 4 - wiki Easyvista Service Apps 2016_JUNE_FR_html_7f84b7c5.png

Accessing data in the data source via JavaScript

List of added functions

Two functions have been added to make information on widgets accessible to the public.

EVServicesApps.getWidgetById(‘string WIDGET_ID ‘) ;
  • This returns null if there are no results. 
  • Otherwise, it returns a JSON object containing information on the widget.
{ guid : ‘WIDGET_ID’, name : ‘WIDGET_NAME’, fqdn : ‘WIDGET_FQDN’}

EVServicesApps.getWidgetsByName(‘string WIDGET_NAME’) ;
  • This returns null if there are no results. 
  • Otherwise, it returns a JSON object containing JSON objects indexed as shown below. You can see information on widgets found by name in the same JSON format as for the first function.
Object : {0 : Object, 1 : Object}

For data source widgets, two other functions can be used in the JSON widget object found:

EVServicesApps.getData(start, length, callback) ; 

This returns all widget data (starting with start, whose size corresponds to length) in the callback function parameter.

EVServicesApps.getColumns(callback) ;

This returns all columns with widget data (including relevant information) in the callback function parameter.

Use case

You want to display a bubble chart in a HTML widget

     Example documentation icon EN.png  Extract from the d3js.org website, accessible by clicking http://bl.ocks.org/mbostock/4063269

       partie 4 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m29da23b6.png

  • Retrieve the data in JSON format from the d3js.org website. Copy and paste the content in a text file named flare.json.
             partie 4 - wiki Easyvista Service Apps 2016_JUNE_FR_html_6368a4f5.png
  • Open your Product name - ev sas.png app and add a JSON data source. Download the flare.json file.
partie 4 - wiki Easyvista Service Apps 2016_JUNE_FR_html_3d63ddeb.png

Rename the data source to identify it easily.

Example documentation icon EN.png    flare

  • Add a HTML Script widget. Open the HTML editor and click partie 4 - wiki Easyvista Service Apps 2016_JUNE_FR_html_mbd0e3dc.png to switch to source mode. Insert the script available on d3js.org.
Open url.png See the script available on d3js.org

<style>
text {
  font: 10px sans-serif;
}
</style>
<script src="//d3js.org/d3.v3.min.js"></script>

<script>
var diameter = 960,
    format = d3.format(",d"),
    color = d3.scale.category20c();
var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);
var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

d3.json("flare.json", function(error, root) {
  if (error) throw error;
  var node = svg.selectAll(".node")
      .data(bubble.nodes(classes(root))
      .filter(function(d) { return !d.children; }))
      .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  node.append("title")
      .text(function(d) { return d.className + ": " + format(d.value); });
  node.append("circle")
      .attr("r", function(d) { return d.r; })
      .style("fill", function(d) { return color(d.packageName); });
  node.append("text")
      .attr("dy", ".3em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.className.substring(0, d.r / 3); });
});
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
  var classes = [];
  function recurse(name, node) {
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
    else classes.push({packageName: name, className: node.name, value: node.size});
  }
  recurse(null, root);
  return {children: classes};
}
d3.select(self.frameElement).style("height", diameter + "px");
</script>
  • Delete the lines below.
d3.json("flare.json", function(error, root) {
  if (error) throw error;
  • Add the lines below to the top of the script. Notes:
    • window.parent enables you to access the function.
    • Indicate the name of the data source in the instruction getWidgetsByName, between ' ' characters.
               Example documentation icon FR.png getWidgetsByName('flare')
window.parent.EVServiceApps.getWidgetsByName('flare')[0].getData(0, -1,
    function(data)
    {
    root = data[0];
Open url.png See the full corrected script
<style>
text {
  font: 10px sans-serif;
}
</style>
<script src="//d3js.org/d3.v3.min.js"></script>

<script>
window.parent.EVServiceApps.getWidgetsByName('flare')[0].getData(0, -1,
  function (data) {
    root = data[0];

    var diameter = 960,
        format = d3.format(",d"),
        color = d3.scale.category20c();

    var bubble = d3.layout.pack()
        .sort(null)
        .size([diameter, diameter])
        .padding(1.5);

    var svg = d3.select("body").append("svg")
        .attr("width", diameter)
        .attr("height", diameter)
        .attr("class", "bubble");

      var node = svg.selectAll(".node")
          .data(bubble.nodes(classes(root))
          .filter(function(d) { return !d.children; }))
        .enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

      node.append("title")
          .text(function(d) { return d.className + ": " + format(d.value); });

      node.append("circle")
          .attr("r", function(d) { return d.r; })
          .style("fill", function(d) { return color(d.packageName); });

      node.append("text")
          .attr("dy", ".3em")
          .style("text-anchor", "middle")
          .text(function(d) { return d.className.substring(0, d.r / 3); });

    // Returns a flattened hierarchy containing all leaf nodes under the root.
    function classes(root) {
      var classes = [];

      function recurse(name, node) {
        if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
        else classes.push({packageName: name, className: node.name, value: node.size});
      }

      recurse(null, root);
      return {children: classes};
    }
    d3.select(self.frameElement).style("height", diameter + "px");
  }
);    
</script>
  • Switch to execute mode to display the bubble chart.
             partie 4 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m2b319c14.png

Search Filter widget

You can now run a search in multiple columns using the Search Filter widget. You can specify values in five search fields and use the operator OR.

Note: The widget remains completely compatible with previous versions where only one search field is available.

       partie 4 - wiki Easyvista Service Apps 2016_JUNE_FR_html_m4eba5601.png

Miscellaneous modifications

Running apps directly in the App Gallery

If users are authorized to access only one app in the App Gallery in execute mode, then this app will run directly without first displaying the App Gallery.

Management of the <Back> key on mobiles

Now, when an app is used on mobile browsers (Chrome with Android mobiles, Safari with iOS mobiles, or Internet Explorer with Windows Phone), the <Back> key enables users to return to the previous page. Previously, this key was used to exit the app.

Tags:
Last modified by Unknown User on 2017/04/25 16:24
Created by Administrator XWiki on 2016/07/18 11:28

Shortcuts

Recent Updates

Haven't been here in a while? Here's what changed recently:

-   Product name - ev itsm.png
-   Product name - ev sas.png

Interesting Content

How to Automate Integration
Add a Shortcut to an App
History
Quick Dashboard
Full text search - Stop Words

Powered by XWiki ©, EasyVista 2018