Web Views

Web Views are self-contained HTML5 pages that can include Fields, Charts, Cards and Tiles.

They provide a complete picture on a single screen and have been designed to display the most important information in a manner that is intuitive and simple to use.

You can design and customize your own Web Views using the Visual Designer program. Once deployed, these Web Views can be viewed by pressing F11 in the program for which one was created.

SYSPRO ships template Web Views with the product, which are located in the \Base\Samples folder of your SYSPRO installation.

Starting

  • Ensure that the SYSPRO e.net Communications Load Balancer service is installed and running.

  • Ensure that you have configured the Server name, SOAP port and REST port details against the E.Net Service Details tab of the System Setup program.

    You can obtain these details from the SYSPROWCFHostService.exe.config file that is located on the server (\Program Files\SYSPRO\SYSPRO WCF Service\Port-Number)

You restrict operator access to activities within a program using the Operator Maintenance program.

Controls whether an operator can edit VBScripts or change customized panes.

It also controls whether an operator can access the Visual Designer program (displayed from the sub menu of the icon).

This does not apply to importing customized panes, which is controlled by the Allow to import customized panes activity.

Solving

Prior to SYSPRO 8 2019 R1, any customized web view by operator or role surfaced in both SYSPRO and SYSPRO Web UI (Avanti).

From SYSPRO 8 2019 R1 onwards you must explicitly state whether a web view is targeted for SYSPRO or SYSPRO Web UI (Avanti).

Because any pre-existing web view is assumed to be for SYSPRO Web UI (Avanti), if you want existing SYSPRO web views to appear in later versions of SYSPRO, you must rename the .JSON file to include a _SYSPRO extension (e.g. UX_OperatorCode_ProgramLZ_SYSPRO.JSON).

The .JSON file resides in your \Base\Settings folder (or the Role_xxx folder if the user interface is configured by role).

You can also rename the file using the Save as function from within the Visual Designer. You will be prompted to indicate the type of web view you want to save (i.e. Avanti or SYSPRO Client).

  1. Select the icon from a window in SYSPRO.

  2. Select the Design Web View option from the context menu.

    The Visual Designer program is displayed.

    You need to indicate whether you want to create the web view using an existing template or create one from scratch.

  3. On the Configure new layout section screen indicate the elements you want to style.
  4. Style the web view according to your preference.

  5. Save the web view.

    The web view is displayed when you reload the program.

  1. Select the icon from a window in SYSPRO.

  2. Select the Edit Web View option from the context menu.

    The Visual Designer program is displayed.

    An administrator can design a web view for use in any SYSPRO program as long as the program was constructed using docking layouts.

    Web Views can also be customized per role, but this is done using the Design UI Layouts SYSPRO Desktop function.

Using

If your login is not under role management, then the first time you load an application with Web Views enabled (and one does not exist for the docking layout) a pre-configured docking layout is applied providing the system locates a standard one for the application (in the \Base\Samples folder of your SYSPRO installation).

The naming convention is UX_APP_xxxxxxLZ.XML, where xxxxxx indicates the application name (e.g. PORPEN for the Purchase Order Query program).

If the docking layout is not found and the Enable minimalist user interface option is switched on, then all panes (except the web view) are shown as closed.

A tile is built specifically around business insights, comprising SQL scripts that surface important enterprise information as events occur - without having to first print reports or execute queries to translate this information into suitable business actions.

For example:

You may have a policy that dictates how many backorders are permitted at company level at any given time. A business insight tile that reveals the 'Total backorders for the company' allows you to monitor this dynamically.

Once you have added a layout Tile section, you can add tiles from a number of categories, where each category includes a number of KPIs.

Tiles can be added to individual programs such as Customer Query with the key field being Customer as a context. Once this context is provided, the tile can show information related to the current key value (e.g. show backorders for a specific customer).

Standard business insights shipped with SYSPRO are stored in the \Base\Samples folder. These are named UX_Tile_??????_xxxxxx.SQL, where ?????? is the TileId that must be unique across all tiles, and xxxxxx is a string that briefly describes the tile (e.g. UX_Tile_SOR001_Backorders_For_Company.SQL).

A Web Card is also a self-contained HTML5 page built specifically around key fields (e.g. customers, suppliers, stock code, etc.) and derives its data from a business object.

Web Cards can be run as a separate entity in its own window, or embedded in Web Views. These can be Key Cards (e.g. displaying information for a key field) or Insight Cards (displaying information such as bank balances, or sales order commitments).

You can pin a Web Card by placing your cursor in the middle of the card and dragging it to the required position. This will keep the card open throughout the run of SYSPRO and information is updated as soon a the key field related to the card is updated.

  • This information is not limited to a cell, but could be in a row in a list view.
  • You can have as many cards open at the same time as you like.
  • Web Cards are displayed on a web view by default and are stored in the \Base\Samples folder (named UX_Card_XX.html, where XX describes the value, or key field that was added to the card).
  • Images of the key field can be included and must be defined as a .BMP multimedia object category.
  • The list of available SYSPRO cards is defined in the IMPUXC.IMP file of the \Base\Store folder.
  • You can define your own Web Cards in the CUSUCX.IMP file of the \Base\Store folder.

  • You can refine the look-and-feel of Web Views by enabling the Enable minimalist user interface option (System-wide Personalization).