PRS TLCSM08 004 E RAID 8.0 MASHUPS Training Unit

TLCSM08
Mashup Introduction
1) What will we do?
2) Datamodel
Composing Mashup Tutorial

1) Create Page
2) Define Date Restrictions
3) Include Data Components
4) Define Components Events & Behaviours
5) Define Filters
6) Drill Down to more detailed mashups
7) Include Section Container
8) Change and Manage Layout
9) Show and Hide Zones
2 WeDo Technologies 2018 | All rights reserved & strictly confidential

During this training, in most of the slides, an icon will be presented on the right upper corner.
Its purpose is to help the user to understand, the slide’s main goal.
Pay Attention
Listen to the narrator
Follow me
Replicate the described steps in your environment
Do it by yourself
Hands on

1
Mashup Introduction
What will we do?

Objective
 The main objective of this unit is to provide to the end-user the capabilities of
building a smart content with different components with interaction between
and has the capability to invoke other smart contents.
 Some of the activities planned on this unit are:
 Create a mashups, with distinct components:
 Data lists
 Sections with distinct type of graphics
 Progress Indicators
 Read only forms
 Filters the information
 Define distinct behaviours associated to an event.
 By clicking either in a row or a columns
 Change section
 Invoke other Mashups
 Manage the smart content layout
 Set a mashup to open as default in a page
 Define variables Mashup variables

Final Result

Filter all the data information within current Summary information about Data
page by date Consumption
Final Result - Explanation
Chart
Selector
Summarized SGSN network events data
Hide this section

Shown when click on
a line from detailed
On Click open other smart content with table
more details of the “call”
Filter all the data information within

current page by Category, Call
Type and/or Traffic Type
Detailed information about SGSN network events
data selected on the summary above

Final Result - Charts

1
Mashup Introduction
Data Model

 The datamodel component represents the data organization to be used on the
smart content configuration.
 To accomplish the activities planned on this course we will mainly use 2 entities:
 RD SGSN Out Agg – contains aggregated data information about the SGSN
events.
 RV T SGSN xDR Stream – contains the detail of the SGSN event calls.

 The entity RD SGSN Out Agg relates with several reference data entities to translate
the IDs to descriptions, i.e., readable information to end-user.

 The entity RV T SGSN xDR Stream relates with several reference data entities to
translate the IDs to descriptions, i.e., readable information to end-user.

2
Create new smart content

Create a New Smart Content
 Start by creating a new empty smart content

 Press Save and name the smart content “Composing Mashups – SmartContent”

Menu Button – Add Page
 To add a page, the user should go to the RAID Vertical Menu.
 Name the page “Composing Mashups”.
 The user must select the Application “Smart Content”

2
Define Date Restrictions

Adding Variables
 Edit “Composing Mashups – SmartContent”

 Let’s define a data restriction, which is used to define the initial defdault analyse period.
 To do that let’s do:
 First go to options
 Then add a variable of category logical field, type global
 Chose for Logical Field Date Id (Calendar) which can be found folder Calendar and chose the default
value January 15, 2015.
 When used with controller date component sets the initial period of analyse.
 Also, add the logical field “Category (Subscriber Type)” as a variable and check options initialization
and Apply filter.

Adding the Date Component
 To build a Date Controller, the user must add the “Date”

component to the Smart Content.
 This component allows managing data according to the

selected Date.
 The user should configure the “Date” component to allow

navigation to specific days, weeks or months.

 The user must configure the 3 units in the

following formats:
 Day
 Week
 Month

 In the Tab “Entry Settings”, the user must select the variable “Date Id (Calendar)”
 This variable was defined on the Mashup variables with the default value 2015-01-15
 This means when the Mashup is opened the first date on use will be 2015-01-15
 This component allow the analyse period however when refreshed returns to the initial defined date
 The Entry View should have the default value that corresponds to the selected unit.

2
Include Data Components

Adding the Data List Component
 To use a Data List the user must add the “Data List” component to
the Mashup and configure it.
 Two Data Lists should be added using different levels of
aggregation regarding the below fields
 On Data List must be named as Aggregation Data
 The Other Detailed Data
Aggregation Data “Data Lista” Detailed Data “Data Lista”
Start Date (SGSN Out Agg) Start Date (SGSN Out Agg)
Traffic Type (Traffic Type) Start Hour (SGSN Out Agg)
Call Type (Call Type) Traffic Type (Traffic Type)
Event Count (SGSN Out Agg) (Sum) Call Type (Call Type)
Event Duration (SGSN Out Agg) (Sum) Description (Subscriber Type)
Data Volume Gb (SGSN Out Agg) (Sum) Event Type (Event Type)

Adding the Data List Component
 In the end the two data list should look like the below ones

Adding the Progress Indicators Component
 To Use a Progress Indicator a “Progress Indicator” component
must be added to the Mashup.
 Three Progress Indicator must be added:
 Data Volume Total
 Subscriber Type Prepaid
 Subscriber Type Pospaid

Adding the Progress Indicators – Data Volume Total
 For the “Data Volume Total” progress indicator, the Logical Field SGSN “Data Volume Gb”
should be sum aggregated.
 Clicking twice on the indicator either in or select or preview area the format are available. It
is also available on double cogwheel in the right grey area.
 Apply the follow formats
 Type: Knob.
 Label: Data Volume Total
 Untougle Percentage
 Format Mask : #,### 'GB'
 Ranges: Defines the Maximum threshold interb
 Minimum: 0
 Maximum 24 522
 Add New Range
 Light Blue: 0-9200
 Medium Blue: 9200-18000
 Dark Blue: 18000-24522

Adding the Progress Indicators – Subscriber Type Prepaid
 For the “Subscriber Types Prepaid” process indicator, the user must select two
columns:
 “Percentage of Prepaid Subscriber Type”
 “Data Volume Gb” and set sum aggregation measure.
 For the first column, the user must select the Icon format type with the user male icon
and enable the percentage option. The maximum range must be 100.
 For the second, the user must apply the Text format type with a “GB” suffix. The user
must add a filter to the Subscriber Type Description which will select only names
terminated with "Prepaid”.

Adding the Progess Indicators – Subscriber Type Prepaid
 In the “Formatting” tab, the Form Layout must be Vertical.

Adding the Progress Indicators – Subscriber Type Postpaid
 For the “Subscriber Types Prepaid” process indicator, the user must select two
columns:
 “Percentage of Postpaid Subscriber Type”
 “Data Volume Gb” and set sum aggregation measure.
 For the first column, the user must select the Icon format type with the user male icon
and enable the percentage option. The maximum range must be 100
 For the second, the user must apply the Text format type with a “GB” suffix.
 The user must add a filter to the Subscriber Type Description which will select only
names terminated with "Postpaid”.

Adding the Progress Indicators – Subscriber Type Postpaid
 In the “Formatting” tab, the Form Layout must be Vertical.

Adding the Read Only Form
 To use a Read Only Form, a “Read Only Form” component must be

added to the mashup.
 The Read Only Form is used to present data in a simple way and
complement the Data List 2 table ad apply the follow format
 Name the form “Record Information”
 Enable the multi column option.
 After uplink Logical filed click on to change the columns position

2
Define Components Events & Behaviours

Adding Customized Events and Behaviours
 On the Data List scope, Customized Events allows to define some specific events.
 The More popular events are:
 Line Click
 Line Button
 Column Click
 For each defined event a behaviour must be associated
 Behaviours will define which are the action associated to the event
 One event can have zero or more than one behaviour (Named as Actions) and the usage is
defined by the order in the behaviour area
 The way to interpret an event on behaviours is something like this
 Whenever ShowDL2 (Event) is triggered, do in (Action Area) the following actions (Actions to be
executed)

 On Data List 1 -> Customised Events, add a new event named “ShowDL2” this event
should have the “Line Click” activation mode.
 On the Behaviour Tab add a new behaviour that will be triggered by the previously created
event.
 Add new Actions to this behaviour:
Whenever is triggered, do the following Filter field Using Operator Value

in action
ShowDL2 Data List (2) Filter Start Date Event = Start Date
(SGSN Out Agg) (SGSN Out Agg)
ShowDL2 Data List (2) Filter Call Type (Call Event = Call Type (Call
Type) Type)
ShowDL2 Data List (2) Filter Traffic Type Event = Traffic Type
(Traffic Type) (Traffic Type)


 For each Progress Indicator for “Prepaid” and “Postpaid”, the user must add some behaviours to
filter and/or clear filters by Subscriber Type.
 By clicking once on “Percentage of Prepaid Subscriber Type, Subscriber Type filter will be applied.
 By double clicking on “Percentage of Prepaid Subscriber Type”, Subscriber Type filter will be cleared.

 By clicking on Data List 2 row’s content, the dimensions must filter the Read Only Form.

2
Define Filters

Overview
 It is available to create filters base on List of Values.

 The idea is use a logical field and on that logical field we have available a list of values which
could be used as filterable values.
 To do that the follow steeps are needed:
 First create a Logical Type of List of values Type
 Then to the logical field which want to be used as filter change the logical type for the created one
 After use the component Restriction
 In the end choose the logical field and configure It.

Adding the Restriction Component
 To Add a Filters, A “Restriction” component must be added to the Mashup;

 Choose the fields to filters the Smart Content:
 Category (Subscriber Type);
 Call Type (Call Type);
 Traffic Type (Traffic Type);

 For each of added field, edit it and set Input Control Type = Value List (Multiple)
 This control type allows to use the list of values

 In the end is expected to have and filterable area like the below picture

2
Drill Down to more detailed mashups

Adding the new Page and Content
 Before adding the Drill Down button, in Data List 2, the user needs to create a new “Smart
Content”.
 Add a “New Content” named “SGSN Xdr Stream”;
 Add a new “Data List” with the following data from “Sgsn Xdr Stream” entity:
Sgsn Xdr Stream

A Number Duration
B Number Units
Call Type Value Difference
Ne ID Volume Down
Calculated Price Volume Up
Data Volume
Adding the new page and content
 The tables should look like this:

Adding the Drill Down Button
 Go to the Smart Content "Composing Mashups – Smart Content";

 In the Data List 2, go to “Customized Events” and define the new event type to provide the
drill down event to the new content created (SGSN Xdr Stream);
 Set up the following parameters:
 Event Name = “ViewXdrStream”;
 Event Label = ‘Xdr Stream’;
 Activation Mode = ‘Line Button’;
 Collapsed Option enabled (Always visible).

Adding the Drill Down Button
 After the “Customized Events” is configured, the user must add a new behaviour to the
Xdr Stream button.
 This behaviour should have the following configurations:

 Whenever = ‘ViewXdrStream’;
 Triggered = ‘Global’;
 Action = ‘Open Smart Content’;
 Content = ‘SGSN Xdr Stream’;
 Presentation Mode = ‘Dialog’:
 Height and Width = 98%

2
Include Section Container

Adding the Section Container Component
 Before adding a Section Container, the user needs to go to Options and add a Section.
 This option allows you to create different displays within the same Smart Content.
 The user must add 3 sections set to not visible in Navigation Bar: Traffic Type, Call Type and
Subscriber Type.
 This behaviour allows to the sections be used in the component Section and not create sections on
the Mashup.

Adding the Section Container Component
 Add the “Section Container” component to the Smart Content.
 With this component it will be possible to select the section to

display.
 The list in the default section will display all sections that
have been set to invisible.
 Select “Call Type” as default section.

Adding Chart Component to sections
 For each Section (except All), the user must create a different type of Chart by adding the
“Chart” component.

Adding the Chart Component – Traffic Type
 On Section “Traffic Type”:
 Add a Chart Widget.

 X Axis: “Traffic Type”
 Y Axis: “SGSN Event Count” with sum aggregation measure.
 Chart type: “Pie”.

Adding the Chart Component Traffic Type
 The user must configure a behaviour to Filter when clicking a specific “Traffic Type”. This
requires adding a new event to the tab “Customised Events” with the “Activation Mode”
selected on “X Axis Click” for the filter to be applied when any of X Axis point is clicked.
 In the "Behaviours" tab, not only must the user have a behaviour to add filters in Global
but also another to switch section in the Section Container, allowing navigation to the "Call
Type" section.

Adding the Chart Component – Call type
 On Section “Call Type”:

 X Axis: “Call Type”
 Y Axis: “SGSN Event Count” with sum aggregation measure.
 Chart type: “Column”.
 Add a new event “CallTypeFilter” to the tab “Customised Events” with the
“Activation Mode” selected on “X Axis Click”;
 Add new Action to this behaviour:
Whenever is triggered, do in the following action Filter field Using Operator Value
CallTypeFilter Global Add Filter Call Type (Call Type) Event = Call Type (Call Type)

Adding the Chart Component – Subscriber Type
 On Section “Subscriber Type”:

 X Axis: “Category (Subscriber Type)”
 Y Axis:
 “SGSN Event Count” with sum aggregation measure (change the plot type to “column”).
 “Data Volume GB” with sum aggregation measure.
 On Advanced Configuration, set true for multiple charts and then configure one more chart for “Description”
instead of “Category”
 The configuration for the “Category” chart must be:

 X Axis: “Description (Subscriber Type)”
 Y Axis:
 “SGSN Event Count” with sum aggregation measure (change the plot type to “column”).
 “Data Volume GB” with sum aggregation measure.

Adding the Action Bar Component
 For each Section the user must also add the “Action Bar” component
to the Smart Content.
 When configuring an Action Bar, the user can create buttons to

interact with and execute specific actions on a given Smart Content.
In this case, it will be useful to navigate between sections.
 The user can change the look of the buttons at “Look and Feel” and
must define a behaviour for the buttons that will allow to navigate to
the other sections by clicking on the respective names.

Adding the Action Bar Component – Traffic Type
 On Section “All”:
 Add a Action Bar with the following Action List:
 Set Look and Feel = ‘Sticky Button Bar’

Adding the Action Bar Component
 On Behaviors set the following actions

 “Whenever”: Call Type select “is triggered, do in”: Section Container “Switch Section”: Call Type
 “Whenever”: Traffic Type select “is triggered, do in”: Section Container “Switch Section”: Traffic Type
 “Whenever”: Subscriber Type select “is triggered, do in”: Section Container “Switch Section”: Subcriber Type

2
Change and Manage Layout

Design the Smart Content
 To design a Smart Content, the user can change the Layout and
select a template to apply. In this case, the selected Layout
Template is “Header-Left-Right-Side”.
 It’s possible to move a Component to another zone of the Layout

Template by clicking “Move Component”.

 The final design of the Composing Mashups Content should look like this:
HEADER
SIDE
LEFT RIGHT

 To manage the layout, the user should click the “Manage Layout” button.

2
Show and Hide Zones

Configure the Areas
 It’s possible to Hide and Show specific areas by adding Behaviours to do what the
user needs. The objective of the user is to be able to hide and show the components
at the right zone of the layout.
 For this, the user needs to apply 25 in Right - width (%) area:

Configure the Right Zone
 The Right zone should be shown when the user clicks on a Data List 2 row. For that, the
behaviours must be configured in the Data List 2.
 Taking advantage of the previously created Record Information filter event, the user needs to
add an action to:
 Manage the layout for:
 “Header + (Left + Right)” zone with 80 Width (%), the Side with 20%, the Left zone with 75% and the Right
zone 25%.

 Add an “Action Bar” at the top of the right zone to create a button that allows to hide the
Record Information

 Add a behaviour with actions that allow to define that the zone has to be hidden and that
allow to manage the layout.


PRS TLCSM08 004 E RAID 8.0 MASHUPS Training Unit

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PRS TLCSM08 004 E RAID 8.0 MASHUPS Training Unit

Uploaded by

Copyright:

Available Formats

TLCSM08

Composing Mashup Tutorial

2 WeDo Technologies 2018 | All rights reserved & strictly confidential

3 WeDo Technologies 2018 | All rights reserved & strictly confidential

4 WeDo Technologies 2018 | All rights reserved & strictly confidential

5 WeDo Technologies 2018 | All rights reserved & strictly confidential

6 WeDo Technologies 2018 | All rights reserved & strictly confidential

Summarized SGSN network events data

Hide this section

Filter all the data information within

7 WeDo Technologies 2018 | All rights reserved & strictly confidential

8 WeDo Technologies 2018 | All rights reserved & strictly confidential

9 WeDo Technologies 2018 | All rights reserved & strictly confidential

10 WeDo Technologies 2018 | All rights reserved & strictly confidential

11 WeDo Technologies 2018 | All rights reserved & strictly confidential

12 WeDo Technologies 2018 | All rights reserved & strictly confidential

Create new smart content

13 WeDo Technologies 2018 | All rights reserved & strictly confidential

 Start by creating a new empty smart content

14 WeDo Technologies 2018 | All rights reserved & strictly confidential

 To add a page, the user should go to the RAID Vertical Menu.

 Name the page “Composing Mashups”.

 The user must select the Application “Smart Content”

15 WeDo Technologies 2018 | All rights reserved & strictly confidential

Define Date Restrictions

16 WeDo Technologies 2018 | All rights reserved & strictly confidential

 Edit “Composing Mashups – SmartContent”

17 WeDo Technologies 2018 | All rights reserved & strictly confidential

 To build a Date Controller, the user must add the “Date”

 This component allows managing data according to the

 The user should configure the “Date” component to allow

18 WeDo Technologies 2018 | All rights reserved & strictly confidential

 The user must configure the 3 units in the

19 WeDo Technologies 2018 | All rights reserved & strictly confidential

20 WeDo Technologies 2018 | All rights reserved & strictly confidential

Include Data Components

21 WeDo Technologies 2018 | All rights reserved & strictly confidential

22 WeDo Technologies 2018 | All rights reserved & strictly confidential

23 WeDo Technologies 2018 | All rights reserved & strictly confidential

 Data Volume Total

 Subscriber Type Prepaid

 Subscriber Type Pospaid

24 WeDo Technologies 2018 | All rights reserved & strictly confidential

25 WeDo Technologies 2018 | All rights reserved & strictly confidential

26 WeDo Technologies 2018 | All rights reserved & strictly confidential

 In the “Formatting” tab, the Form Layout must be Vertical.

27 WeDo Technologies 2018 | All rights reserved & strictly confidential

28 WeDo Technologies 2018 | All rights reserved & strictly confidential

 In the “Formatting” tab, the Form Layout must be Vertical.

29 WeDo Technologies 2018 | All rights reserved & strictly confidential

 To use a Read Only Form, a “Read Only Form” component must be

30 WeDo Technologies 2018 | All rights reserved & strictly confidential

Define Components Events & Behaviours

31 WeDo Technologies 2018 | All rights reserved & strictly confidential

32 WeDo Technologies 2018 | All rights reserved & strictly confidential

Whenever is triggered, do the following Filter field Using Operator Value

33 WeDo Technologies 2018 | All rights reserved & strictly confidential

34 WeDo Technologies 2018 | All rights reserved & strictly confidential

35 WeDo Technologies 2018 | All rights reserved & strictly confidential

36 WeDo Technologies 2018 | All rights reserved & strictly confidential

37 WeDo Technologies 2018 | All rights reserved & strictly confidential

 It is available to create filters base on List of Values.

38 WeDo Technologies 2018 | All rights reserved & strictly confidential