Difference between revisions of "Tutorial: Creating View in QPR UI"

From Mea Wiki
Jump to navigation Jump to search
(403255)
 
(55 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Creating a New MobileDashboard View:
+
__TOC__
# Creating a new QPR MobileDashboard view starts by defining the Name, Description, and View Context. These are defined in the view properties that is opened by clicking the '''Properties''' button:<br>[[File:OpenViewProperties.png|800px]]
+
{{MDBTutorialViewPropertiesAndContext}}
# First, give your view a '''Name''' and a '''Description'''. Then, click '''Context''':<br>[[File:ViewProperties.png|800px]]
 
# The context defines the starting points for later querying data from QPR EnterpriseArchitect/ProcessDesigner, QPR Metrics, and/or QPR ProcessAnalyzer. Define the context by selecting values for the context variables by first selecting a variable from the drop-down menu and then tapping the edit icon on the Value column:<br>[[File:ViewContext.png|800px]]<br>The available context variables are:
 
#* '''sys:eapdModel''': QPR EnterpriseArchitect/ProcessDesigner model.
 
#* '''sys:eapdElementType''': QPR EnterpriseArchitect/ProcessDesigner element type that exists in the defined QPR EnterpriseArchitect/ProcessDesigner model
 
#* '''sys:eapdElement''': QPR EnterpriseArchitect/ProcessDesigner element that exists in the defined QPR EnterpriseArchitect/ProcessDesigner model
 
#* '''sys:metricsModel''': QPR Metrics model
 
#* '''sys:metricsScorecard''': QPR Metrics scorecard that exists in the defined QPR Metrics model
 
#* '''sys:metricsValueSettings''': QPR Metrics value settings that exist in the defined QPR Metrics model
 
#* '''sys:metricsElement''': QPR Metrics element that uses the defined Metrics value settings
 
#* '''sys:referenceDate''': The date used to define which period is to be used in the view
 
#* To define your own context variables and their values, '''type in the name of the variable''' to the text field and '''click the check mark'''. After that, you can '''click the value field''' and type in the value for your custom context variable.
 
#* You can also define the following system context variable values that have an effect on the user interface:
 
#** '''sys:hideViewHeader''': Defines if the top main toolbar in the view is hidden ("true") or visible ("false")
 
#** '''sys:showVersionNumbers''' Defines if the version number text in the top main toolbar of the view and the panel headers are visible ("true") or hidden ("false")
 
#* The '''Behavior''' selection affects the context variable used in the view in the following way:
 
#** '''Default''': the value of the context variable will be inherited from the higher level, i.e. Session (defined via the Selections button) → View → Panel → Presentation object. If there is no value for the context variable on a higher level, the value defined here will be used.
 
#** '''Fixed''': the value of the context variable will overwrite any existing effective value of the same context variable.<br><br>The panel and presentation object properties also have the Context tab. If you want a panel or a presentation object to always have a specific context variable value regardless of what is selected for the session, view, or panel, define the context variable in the panel or presentation object properties, and set the Behavior of the context variable to "Fixed".<br><br>To see what context variable values are used in the view, panel, or presentation object, select the '''Show effective context''' check box in the Context tab of the view, panel, or presentation object properties pages.
 
#* Using '''QPR EnterpriseArchitect/Processdesigner''' data:<br>[[File:EAContext.png|800px]]
 
#** To use EnterpriseArchitect/ProcessDesigner data, define the '''sys:eapdModel''', '''sys:eapdElementType''', and '''sys:eapdElement''' context variables to set the default context instance. With the '''sys:eapdElement''' context variable, you can use the check boxes on the left side of the list to select the elements to which the view you are designing applies. These elements will then be selectable as the context instance via the '''Selections''' button when browsing the view. Selecting the '''All elements automatically''' check box will result in all elements of the element type defined by the '''sys:eapdElementType''' variable to be automatically available in the view when new elements of that type are added to the model.
 
#* Using '''QPR Metrics''' data:<br>[[File:MetricsContext.png|800px]]
 
#** If you want to show data from element(s) that reside in some particular scorecard(s), define the '''sys:metricsModel''' and '''sys:metricsScorecard''' context variables. This is the most commonly preffered way of showing Metrics data.
 
#** If you want to show data from a single Metrics element or measure, define the '''sys:metricsModel''', '''sys:metricsValueSettings''', and '''sys:metricsElement''' context variables.
 
#*** The difference between these two approaches is that views with the '''sys:metricsScorecard''' variable defined can show data from multiple measures residing in the selected scorecards, whereas views with the '''sys:metricsElement''' variable defined are restricted to the measures selected here, but they enable browsing different measures using the same value settings as the selected measure.
 
#*** With the '''sys:metricsScorecard''' and '''sys:metricsElement''' variables, you can use the check boxes on the left side of the list to select the scorecards/elements to which the view you are designing applies. These scorecards/elements will then be selectable as the context instance via the Selections button when browsing the view. Selecting the '''All scorecards/elements''' automatically check box will result in all scorecards/elements of the model defined by the sys:metricsModel variable to be automatically available in the view when new scorecards/elements of the defined sys:metricsValueSettings type are added to the model.
 
#* Using '''QPR ProcessAnalyzer''' data:<br>[[File:PAContext.png|800px]]
 
#** If you want to show ProcessAnalyzer data, define the desired custom context variables and their values into the text fields. Some suggested variables to use: '''FilterId''', '''ModelId''', '''AnalysisType''', '''MaximumCount''', '''SelectedActivities''', and '''SelectedTransitions'''. See the [[Analysis Parameters]] page for a more complete listing of possible variables.
 
# After defining the view properties and context, click the '''Close''' button to apply the changes and exit the view properties.<br>[[File:ViewPropertiesClose.png|800px]]
 
  
[[Category: QPR MobileDashboard Tutorial]]
+
{{MDBTutorialPanelPropertiesAndContext}}
 +
 
 +
{{EditPanel}}
 +
 
 +
{{MDBTutorialExternalContent}}
 +
 
 +
{{MDBAddingRepeater}}
 +
 
 +
[[Category: QPR UI]]

Latest revision as of 14:57, 15 January 2020

Defining View Properties and Variables

To define context variables, type in the name of the variable to the text field and click the check mark. After that, you can click the value field and type in the value for your context variable. Context variables starting with "sys:" are system variables which have special purpose in QPR UI - use them only for their intended purpose. The Behavior selection affects the context variable used explained in Context Variable Behaviors. To see what context variable values are used in the view, panel, or presentation object, select the Show effective context check box in the Context tab of the view, panel, or presentation object properties pages.

Variables Usage Example

There is a view with one panel, in which there is one presentation object. The Session variable values are defined as follows:

Variable name Value
AccountManager John Smith
Country Sweden

In the View Properties, the following variable values are defined:

Variable name Value Behavior
AccountManager William Taylor Stored variable
CustomerGroup Kids Local variable

In the Panel Properties, the following variable values are defined:

Variable name Value Behavior
AccountManager Susan Chapman Local variable
Country Finland Local variable

In the Presentation Object Properties, the following variable values are defined:

Variable name Value Behavior
ProductGroup Umbrellas Stored variable

In the Effective View Context, these result into the values shown below. Note the Source column displaying the information where the effective context comes from:

Variable name Value Source Scope
AccountManager William Taylor Scope of the view View
Country Sweden Inherited from session context Session
CustomerGroup Kids Scope of the view View

In the Effective Panel Context, these result into the values shown below. Note the Source column displaying the information where the effective context comes from:

Variable name Value Source Scope
AccountManager Susan Chapman Initialized from the panel's context Panel
Country Finland Initialized from the panel's context Panel
CustomerGroup Kids Inherited from the effective context of the view View

In the Effective Presentation Object Context, these result into the values shown below. Note the Source column displaying the information where the effective context comes from:

Variable name Value Source Scope
AccountManager Susan Chapman Inherited from the effective context of the panel Panel
Country Finland Inherited from the effective context of the panel Panel
ProductGroup Umbrellas Scope of the presentation object Presentation object
CustomerGroup Kids Inherited from the effective context of the view View

To put it more concisely, the context variable values (and their behaviors) are as follows:

Context Variable Session View Panel Presentation Object
AccountManager John Smith William Taylor (Stored variable) Susan Chapman (Local variable)
Country Sweden Finland (Local variable)
ProductGroup Umbrellas (Stored variable)
CustomerGroup Kids (Local variable)

The effective context values are:

Context Variable Session View Panel Presentation Object
AccountManager John Smith William Taylor Susan Chapman Susan Chapman
Country Sweden Sweden Finland Finland
ProductGroup Umbrellas
CustomerGroup Kids Kids Kids

Example: Adding Panel and Defining Properties and Context

  1. Add a new Panel to the view by clicking the Add New Panel button in the side toolbar.
    AddNewPanel.png
  2. Click the panel to select it and then click the Properties button on the panel.
    PropertiesPanel.png
  3. In the Panel Properties, you can define the Name, Identifier, and Description on the Properties tab.
    PanelProperties.png

    In addition to normal text, you can use Variable and Expression tags in the panel name to enable the name to change dynamically or construct the name using an expression. For example, you could define the panel name to be Selected scorecard: <#sys:metricsScorecard>.
  4. Switch to the Presentation tab. On the Presentation tab, change the Background color. Set also the Inner margin to be "5", this setting will make the presentation objects be closer to each other than with the default setting. You can also adjust the other presentation settings, see the Panel Properties page for their descriptions.
    PanelPresentation.png

    You can also define panel specific context variable values on the Context tab. Apply the changes and close the panel properties by clicking Close.

Editing Panel Contents

  1. To add contents to a panel, open the Panel Editor by clicking the Edit button.
    800px
  2. The left side toolbar contains all the possible presentation objects in QPR UI. Click on a presentation object icon on the left side toolbar to add the presentation object to the panel.
    POsToolbar.png

Usage Example

  1. Click the External Content presentation object icon.
  2. Click the Properties button on the presentation object to open its properties.
    OpenExternalContentProperties.png
  3. Define the Name, Description, and the External content URL. In the Name and URL fields, you can use context variables by typing in the context variable name in the format "{#contextvariablename}".
  4. After defining these properties, click Close. The web page should now be visible:
    ExternalContent.png

Add a Repeater and repeated content to a panel

  1. Add a Repeater Presentation Object to the panel by clicking the Repeater Presentation Object button on the side toolbar:
    AddRepeater.png
  2. Click the Properties button on the Repeater:
    OpenRepeaterProperties.png
  3. After defining the Name, click the Datasets tab:
    RepeaterDefineDataset.png
  4. Type in an identifier for the dataset and click the check mark:
    RepeaterNewDataset.png
  5. Define the query for the dataset, and then click the Data Source tab:
    RepeaterProperties2.png
  6. Select the dataset you created earlier from the data source list and click Close:
    RepeaterDataSource.png
  7. To add the contents to be repeated, click the Edit button on the repeater:
    RepeaterEdit.png
  8. Add an HTML Presentation Object to the Repeater:
    RepeaterAddHTML.png
  9. Click the Properties button on the HTML Presentation Object to open the HTML Presentation Object Properties:
    RepeaterHTMLProperties.png
  10. After defining the Name for the HTML Presentation Object, click the Presentation tab:
    RepeaterHTMLProperties2.png
  11. Define the HTML code. In the HTML code, use the names of the data source columns as a context variable references in the format "{#ContextVariableReference}". For example, here the HTML Presentation Object will get values from the name and createddate columns in the Repeater data source:
    RepeaterHTMLCode.png
  12. Click Close a couple of times so that you are in the View Editor. The Repeater has now created an HTML Presentation Object for every row cell value in the Repeater data source, and the values from each row are now shown in place of the context variable references:
    RepeaterDone.png