OpcenterEXDS_UIReference

Opcenter Execution Discrete 4.
UI Reference and Customization Manual
04/2021
PL20200729105521013
Guidelines
This manual contains notes of varying importance that should be read with care; i.e.:
Important:
Highlights key information on handling the product, the product itself or to a particular part of the documentation.
Note: Provides supplementary information regarding handling the product, the product itself or a specific part of
the documentation.
Trademarks
All names identified by ® are registered trademarks of Siemens AG.
The remaining trademarks in this publication may be trademarks whose use by third parties for their own purposes
could violate the rights of the owner.
Disclaimer of Liability
We have reviewed the contents of this publication to ensure consistency with the hardware and software
described. Since variance cannot be precluded entirely, we cannot guarantee full consistency. However, the
information in this publication is reviewed regularly and any necessary corrections are included in subsequent
editions.
Security information
Siemens provides products and solutions with industrial security functions that support the secure operation of
plants, systems, machines and networks. In order to protect plants, systems, machines and networks against
cyber threats, it is necessary to implement – and continuously maintain – a holistic, state-of-the-art industrial
security concept. Siemens’ products and solutions only form one element of such a concept.
Customer is responsible to prevent unauthorized access to its plants, systems, machines and networks. Systems,
machines and components should only be connected to the enterprise network or the internet if and to the extent
necessary and with appropriate security measures (e.g. use of firewalls and network segmentation) in place.
Additionally, Siemens’ guidance on appropriate security measures should be taken into account. For more
information about industrial security, please visit https://www.siemens.com/industrialsecurity.
Siemens’ products and solutions undergo continuous development to make them more secure. Siemens strongly
recommends to apply product updates as soon as available and to always use the latest product versions. Use of
product versions that are no longer supported, and failure to apply latest updates may increase customer’s
exposure to cyber threats.
To stay informed about product updates, subscribe to the Siemens Industrial Security RSS Feed under https://
www.siemens.com/industrialsecurity.
Siemens AG PL20200729105521013 Copyright © Siemens AG 2021

Digital Industries 20210422_172305 Technical data subject to change
Postfach 48 48
90026 NÜRNBERG
GERMANY
Table of Contents
1 Essentials to Approaching UI Customization in Opcenter Execution Discrete ..7
2 How to Create a Custom Application ...................................................................9
3 How to Customize the User Interface ................................................................11
3.1 Identifying the Customizable Providers ..................................................................................11
3.2 Customizing the Item Collection Viewers ................................................................................12
3.2.1 Item Collector Viewer Service................................................................................................................................. 12
3.3 Customizing the Property Grids ...............................................................................................13
3.3.1 Property Grid Service .............................................................................................................................................. 14
3.4 Customizing the Command Bars..............................................................................................21
3.5 Customizing the Menu Buttons ................................................................................................23
3.6 Customizing the Tab Controls ..................................................................................................23
3.7 Customizing oData Queries and Backend Commands ...........................................................24
3.8 Customizing the Icons ..............................................................................................................26
3.9 Customizing the Default UI Configuration...............................................................................26
4 Opcenter Execution Discrete UI Modules ..........................................................28
4.1 CLM Resource Management UI Module ...................................................................................29
4.2 Configuration Keys UI Module..................................................................................................29
4.3 DCD Engineering UI Module......................................................................................................30
4.4 Defect Type Management UI Module .......................................................................................31
4.5 Document Management UI Module .........................................................................................32
4.6 Genealogy UI Module ................................................................................................................32
4.7 High Automation Mashup UI Module .......................................................................................33
4.7.1 High Automation Details Screen ............................................................................................................................ 34
4.7.2 High Automation Operator Landing Screen .......................................................................................................... 34
4.7.3 High Automation Operator Task List Screen ......................................................................................................... 35
4.8 Labor Tracking Management UI Module..................................................................................35
4.9 Non-Conformance Lifecycle UI Module ...................................................................................36
4.10 Non-Conformance Notification Management UI Module .......................................................37
4.11 Non-Conformance Supervisor Management UI Module .........................................................38
4.12 Operation/Step Category UI Module........................................................................................39
4.13 Operator Landing Mashup UI Module ......................................................................................40
Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual iii

4.13.1 Operator Detail Screen ........................................................................................................................................... 41
4.13.2 Operator Detail Steps Screen ................................................................................................................................. 41
4.13.3 Operator Landing Task List Screen ........................................................................................................................ 42
4.13.4 Operator Landing Home Screen............................................................................................................................. 42
4.14 Order Work In Progress UI Module ...........................................................................................43
4.15 Process Catalog Management UI Module (Deprecated) .........................................................43
4.16 Team Management UI Module .................................................................................................44
4.17 Transport Operation Landing UI Module.................................................................................44
4.18 Users and Skills UI Module .......................................................................................................45
4.19 Work Order As Built UI Module .................................................................................................46
4.20 Work Order As Planned BOP UI Module ...................................................................................48
4.21 Work Order Status UI Module (Deprecated) ............................................................................49
5 Opcenter Execution Discrete UI Components ...................................................51
5.1 Button Bar UI Component ........................................................................................................51
5.2 Customizable Button Bar UI Component ................................................................................54
5.3 High Automation Header Bar UI Component ..........................................................................56
5.4 Declare Defect UI Component ..................................................................................................56
5.5 Document Preview UI Component...........................................................................................57
5.6 Execution Group Details UI Component ..................................................................................58
5.7 Execution Groups Document Preview UI Component ............................................................58
5.8 Execution Groups Header Bar UI Component .........................................................................59
5.9 High Automation Equipment List UI Component ...................................................................60
5.10 Material Production UI Component .........................................................................................60
5.11 Material Tracking UI Component .............................................................................................61
5.12 Operation Header Bar UI Component......................................................................................61
5.13 Operation List UI Component ..................................................................................................63
5.14 Part Program UI Component....................................................................................................64
5.15 Print Job File UI Component ....................................................................................................64
5.16 Quality Inspection UI Component............................................................................................65
5.17 Step List UI Component............................................................................................................65
5.18 Task Details UI Component (Deprecated) ...............................................................................66
5.19 Task Container UI Component .................................................................................................70
5.20 Task Viewer UI Component ......................................................................................................72
iv Opcenter Execution Discrete4.1 - UI Reference and Customization Manual

5.21 Work Order Routing UI Component .........................................................................................73
5.22 Zero Touch Component UI Component ..................................................................................74
Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual v

ID OpcenterEXDS_UIReference
Title UI Reference and Customization Manual
Product Title Opcenter Execution Discrete
Version Title 4.1
Product Version OpcenterEXDS_4.1.0.0
Category Development, Support
Summary Provides information on how to customize the UI provided by

Opcenter Execution Discrete
Audience System Integrator, Support Engineer, Project Engineer,

Commissioning Engineer, Developer
Revision PL20200729105521013
State Published
Author Siemens AG
Language en-US
6 Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual

Essentials to Approaching UI Customization in Opcenter Execution Discrete
1 Essentials to Approaching UI Customization in Opcenter

Execution Discrete
Customization is necessary whenever what is provided by default in Opcenter Execution Discrete does not
completely satisfy your project's requirements.
Depending on your needs, you can choose to:
• Customize the UI provided in the Opcenter EX DS application without the need of writing additional code,
except for the code needed to wire together the components. This can be achieved by using the Mashup Editor
to combine UI Components to form new UI Modules to be added to your UI application. This new UI application
is not so much a revamped layout from a graphical standpoint, but rather a new way of presenting runtime data,
establishing relationships between its various elements according to your needs.
• Create a custom UI application writing additional Javascript code which will be processed alternatively to the
standard code. The range of available customizations extends from basic changes to the user interface (for
example, changing icons or grid appearances) to complex interactions with the data model.
• Extend Model Driven UI Modules, as explained in section How to Extend User Interfaces in an Extension App of the
Opcenter Execution Foundation Development and Configuration Guide.
User Interface Terminology

Term Definition
Page Graphical layout displayed by a browser.
Screen Root page which is the entry point of a particular concept.

Every module can contain one or more screens.
State An Angular UI.Router state corresponds to a "place" in the application in

terms of the overall UI and navigation.
A state describes (via the controller / template / view properties) what the
UI looks like and does at that place.
Module Collection of related user interface screens, which may be deployed using
Solution Studio.
A Module can navigate to other Modules using States.
Component AngularJS directive that can be used in the Mashup Editor of Solution
Studio.
Controller Angular object which "controls" data and the view used to show it.
Service Function or object that is available for an Angular application. A Service

can be used across different Controllers in a consistent manner.
Provider Term which groups Services and Angular Factories (all the customizable
Angular objects).
Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual 7

Essentials to Approaching UI Customization in Opcenter Execution Discrete
How are Standard and Custom UI Codes Processed?

When a Opcenter EX DS page is loaded, the customization service checks if custom Angular Providers are present. If
a custom Provider is found, it is called when needed. Inside a custom Provider, it is possible to customize one or
more functions.
A custom Angular Provider or function has the same name of its corresponding standard version, plus
the _custom suffix. For example:
• standard icons service: u4dm.services.icons
• custom icons service: u4dm.services.icons_custom
Checking for custom Angular Providers is performed according to the following workflow:

How to Create a Custom Application
2 How to Create a Custom Application

Customizing Opcenter Execution Discrete is required whenever you need to extend the data model and/or the
related business logic. This may be for example:
• new properties of Opcenter EX DS entities;
• new project entities;
• new commands;
• new events;
• new signals;
• new UIs (components, modules, screens).
The recommended way to customize Opcenter EX DS is developing an Extension App. The advantage of this
approach, compared to creating a Custom Application from scratch, is that:
• it allows you to take advantage of the existing Public Object Model and its relationships
• it allows you to extend Model Driven UIs provided by Opcenter EX DS.
For information about the creation of Extension Apps in Opcenter Execution Foundation , refer to How to Develop an
Extension App in the Opcenter Execution Foundation Development and Configuration Guide.
The following workflow represents an example of a complete customization to extend a Opcenter EX DS entity
imported into a Custom Functional Block. Steps needed only for customizing the User Interface are highlighted.
Workflow

How to Create a Custom Application
1. In Project Studio:
• Create a Custom Functional Block.
• Create the commands to interact with.
• Compile the Custom Functional Block.
• Create an Extension App based on the AppU4DM App.
• In the Extension App, reference the previously created Custom Functional Block.
• Define the navigation property between the Custom Functional Block entity and the standard entities.
• Customize the User Interface, if you have created Composite Commands.
• Compile the Extension App.
2. In Solution Studio:
• In the Opcenter EX DS solution, add the Extension App to the AppU4DM App .
• Associate any custom Command to a master or runtime worker.
• Build and deploy the Solution.

How to Customize the User Interface
Identifying the Customizable Providers
3 How to Customize the User Interface

Customizing the User Interface is generally required while creating a Custom Application, in order to implement the
desired modifications to the graphical layout and/or to the data model.
 The following workflow and instructions refer only to the customization of standard UI modules.
If you want to customize a Model-driven UI module, refer to How to Extend User Interfaces in an Extension
App in the Opcenter Execution Foundation Development and Configuration Guide.
Workflow
In order to create one or more custom Angular Providers, perform the following steps:
1. Identify the Provider you need to customize.
2. Write the custom code of the Provider in one or more Javascript files.
3. Name the Provider object_custom as explained above in the Naming Convention paragraph.
4. Reference the code in the Angular module 'Siemens.SimaticIT.U4DM.AppU4DM.services.customServices'
which is already defined and included in the Opcenter EX DS application.
5. Repeat steps 1-4 for each Angular Provider.
6. Create a custom UI Module and add it to the UI Application where you want to apply your customizations.
 If the purpose of the UI Module is only to include the customizations, it can be set as hidden in the
containing UI Application.
Examples
• Item Collection Viewers
• Property Grids
• Command Bars
• Menu Buttons
• Tab Controls
• oData queries and Backend calls
• Icons
• Default UI configuration
3.1 Identifying the Customizable Providers

While customizing the User Interface, you need to identify which Angular Providers (UI Modules, UI Components or
Services) are called when the page is displayed, and to do this you can examine the console log available in the
Developer Tools of the web browser.
Procedure
1. In one of the supported Web Browsers, click F12 to enter Developer Tools mode.
2. In the Developer Tools, click the Console tab.
3. Access the Opcenter EX DS page you want to customize. In the Developer Tools Console, the Opcenter EX DS log
is displayed.
4. Make sure that the displayed items are filtered according to at least Info level.
5. Browse the log and take note of the rows starting with [UADM][CUSTOMIZATOR].

Customizing the Item Collection Viewers
Log Structure
Each row has the following structure:
[UADM] [CUSTOMIZATOR] Searching for providerName_custom : FOUND/NOT FOUND
Row Section Description
providerName_custom Name of the custom Angular Provider expected by the page
FOUND/NOT FOUND • FOUND: providerName_custom is present and it has been

loaded after the standard one;
• NOT FOUND: providerName_custom is not present,
therefore only the standard providerName has been
loaded.
3.2 Customizing the Item Collection Viewers

This example of User Interface customization allows you to add or remove fields from the Item Collection Viewers of
the application.
Procedure
1. Create a .js file into a custom folder of your custom App.
2. Create a service called [controller_name]_custom into
the Siemens.SimaticIT.U4DM.AppU4DM.services.customServices module.
3. Create a function called icvConfig inside the service.
var controllerName = 'yourControllerName';
function configureWOIcv() {
var options = u4dmSvc.icv.configureIcvByEntity("WorkOrder", 'm', getAllWOs,
selectionChanged, 'workorder-status-list');
//insert here custom page management of standard options, if needed
vm.icvConfig = u4dmSvc.customizator.customizeICV(controllerName, options);
}
3.2.1 Item Collector Viewer Service

While customizing the Item Collector Viewers, you can use the Item Collector Viewer Service to set a standard ICV
configuration for each entity.
ICV Service API Functions

Customizing the Property Grids
API Function Description Example
addFieldInGrid Adds a field object in the grid mode at options.addFieldInGrid(newfi

the last position or in the given elds.RecycleCount,6);
position. options.addFieldInGrid(newfi
elds.MaxRecycleCount,7);
options.addFieldInGrid(newfi
elds.MinQuantity,8);
addFieldInTilePropertyList Adds a field object in the tile property options.addFieldInTileProper

grid at the last position or in the given tyList(newfields.qty);
position. options.addFieldInTileProper
tyList(newfields.status);
options.addFieldInTileProper
tyList(newfields.RecycleCoun
t);
removeFieldFromGrid Removes a field from the grid and options.removeFieldFromGrid(

returns the field id. 'IsReserved');
options.removeFieldFromGrid(
'SerialNumberCode');
removeFieldFromTilePrope Removes a field from the tile properties options.removeFieldInTilePro

rties and returns the field id. pertyList(newfields.qty);
options.
removeFieldInTilePropertyLis
t(newfields.status);
options.
removeFieldInTilePropertyLis
t(newfields.RecycleCount);
3.3 Customizing the Property Grids

This example of User Interface customization allows you to customize the behavior of Property Grids, which is
essential for viewing and modifying custom field values.
Procedure
2. Create a service called [Controller Name]_custom into
3. Create a function called propertyGridConfig inside the service to customize the retrieval function. If you have
more than one Property Grid on the page, you need to create corresponding functions with different names.

var mod = angular.module('Siemens.SimaticIT.U4DM.AppU4DM.services.customServices')

.service('workOrderStatus_workOrderAdd_Ctrl_custom ', ['u4dm.services',
workOrderStatus_workOrderAdd_Ctrl_custom ]);
function workOrderStatus_workOrderAdd_Ctrl_custom () {
this.configureFromProcessPg = pgConfig;
function pgConfig(propGridMgr, currentEntity) {

//CREATE NEW FIELD WITH PG MANAGER
propGridMgr.createTextProperty({
id: newField,
labelKey: newFieldDisplayText,
value: currentEntity[newField]
});
//REDEFINE THE GET VALUE FUNCTION
propGridMgr.getValues = function (item, standardGetValues) {
//REUSE THE STANDARD FUNCTION
standardGetValues(item);
//ADD THE NEW FIELD
item[newField] = propGridMgr[newField].value;
};
return propGridMgr;
}
}
3.3.1 Property Grid Service

While customizing the Property Grids, you can use the Property Grid Service to provide an interface to configure the
Property Grid widget. The Property Grid Service acts as a constructor function for the Property Grid.
Property Grid Methods and Examples
Method Example
createTextProperty(config) pgFields.lorem =
propertyGrid.createTextProperty({
id: 'lorem',
labelKey: 'sit.u4dm.lorem',
value: "ipsum",
read_only: false,
required: true,
invisible: false,
checkSpecialChars: true,
onChange: function(oldVal, newVal, form)
{...},
customValidation: function(val, model){...}
});

Method Example
createTextPropertyWithButton(config) pgFields.lorem =
propertyGrid.createTextPropertywithButton({
..., //widgetspecific attributes
onClick: callbackFn,
buttonDisabled:
vm.currentItem.GenerateDisabled,
buttonIcon: icon.plus,
buttonText: "Generate",
showButtonInViewMode: true //if button has to be
displayed in view mode
});
createTextAreaProperty(config) pgFields.lorem =
propertyGrid.createTextAreaProperty({
id: 'lorem',
value: "ipsum",
read_only: true,
});
createTextAreaPropertyWithButton(config) pgFields.lorem =
propertyGrid.createTextAreaPropertywithButton({
buttonDisabled:
});
createNumericProperty(config) pgFields.lorem =
propertyGrid.createNumericProperty({
id: 'lorem',
value: "ipsum",
read_only: true,
{...},
required: true,
invisible: false,
minVal: vm.currentItem.QuantityMin,
maxVal: vm.currentItem.QuantityMax,
validationCallback: function(val, model)
{...}
});

Method Example
createNumericPropertyWithButton(config) pgFields.lorem =
propertyGrid.createNumericPropertywithButton({
buttonDisabled:
});

Method Example
createEntityPickerProperty(config) pfFields.lorem =
propertyGrid.createEntityPickerProperty({
id: 'lorem',
value: vm.ipsum,
required: vm.lorem,
dataSource: vm.productionTypeList // Array
or a Promise,
displayProperty: 'NId',
onChange: function(oldVal, newVal){...} //
For selection change,
pickerOptions:
u4dmSvc.icv.configureIcvByEntity(
"MaterialDefinition", null, null, null,
controllerName, '')
});
/*datasource configured as promise*/
pgManager.createEntityPickerProperty({
id: 'powderMaterial',
value: vm.currentItem.selectedPowder,
labelKey: 'sit.u4dm.genealogy.labels.powder-
batch',
dataSource: getPowderMaterials(), // returns
a promise
pickerOptions: pickerOptions,
onChange: materialChange,
resolveEntityPickerValue: function (result) {
return _(result.value).find(function
(matItem) { return matItem.Id ==
selectedMaterialId }); //custom logic to return
selected object
}
});
function getPowderMaterials() {
if (vm.materials) return materials;
else return u4dmSvc.api.am
.powder.getAll().then(function (result) {
vm.materials = result.value; //in
case pgGrid is refreshed multiple times then we
can cache data to avoid multiple hits to the
server
return result;
}, u4dmSvc.ui.overlay.showBackendError);
}
/*datasource configured as object for lazy
loading*/
pfFields.lorem =
propertyGrid.createEntityPickerProperty({
id: 'lorem',

Method Example
value: vm.ipsum,
required: vm.lorem,
dataSource:{
getAll: function (options, hasFilter),
searchField: 'Name' //required in case if
the displayProperty is a custom property
} // Array or a Promise,
pickerOptions:
"MaterialDefinition", null, null, null,
controllerName, '')
});
createEntityPickerPropertyWithButton(config pgFields.lorem = propertyGrid.createEntityPickerP

) ropertywithButton({
buttonDisabled:
});
createDateTimeProperty(config) pgFields.lorem =
propertyGrid.createDateTimeProperty({
id: 'lorem',
dateValue: vm.currentItem.ED,
timeValue: vm.currentItem.ET,
validationCallback: endDateValidationFn
});
createCheckboxProperty(config) pgFields.lorem =
propertyGrid.createCheckboxProperty({
id: 'lorem',
read_only: true,
invisble: false,
options: vm.options // [{labelKey:
'sit.u4dm.ipsum', checked: false}, ...]
});

Method Example
createComboBoxProperty(config) pfFields.lorem =
propertyGrid.createComboBoxProperty({
id: 'lorem',
value: vm.ipsum,
required: vm.lorem,
dataSource: vm.optionsList,
valueProperty: 'Id'
onChange: onChangeCallback //For selection
change
});
createNumericPropertyWithReadOnlyText(co pgFields.lorem =
nfig) propertyGrid.createNumericPropertyWithReadOnlyTe
xt({
id: 'lorem',
value: "ipsum",
read_only: true,
{...},
required: true,
invisible: false,
minVal: vm.currentItem.QuantityMin,
maxVal: vm.currentItem.QuantityMax,
validationCallback: function(val, model)
{...},
textValue: "someText" //To set the value of
the read-only text field.
});

Method Example
createDurationTimeProperty(config) pgFields.lorem =
propertyGrid.createDurationTimeProperty({
id: 'lorem',
value: "ipsum",
read_only: true,
{...},
required: true,
invisible: false,
format: 'd:h:m:s', // default is 'h:m:s' and
it supports any momentjs duration supported
format (https://momentjs.com/docs/#/durations/)
value: vm.currentItem.someValue, // value
can be ticks, moment.duration object or a plain
JS object with structure {seconds: s, minutes:
m, hours: h},
displayValue: "someText"//To set the value
in readOnly mode.
})
createNumericPropertyWithEntityPicker(confi pfFields.lorem =
g) propertyGrid.createEntityPickerProperty({
id: 'lorem',
value: vm.ipsum // if number than it will be
assigned to numeric field else if array then 0-
index value will be assigned to Numeric Field
and 1-index value will be assigned to
EntityPicker
required: vm.lorem,
read_only: true,
dataSource: vm.productionTypeList,
disablePicker: true, //If only entity picker
needs to be disabled
pickerValue: vm.ipsum,
pickerOptions:
"MaterialDefinition", 'm', null, null,
controllerName, '')
});

Customizing the Command Bars
Method Example
createPasswordProperty(config) pgFields.lorem =
propertyGrid.createPasswordProperty({
id: 'lorem',
value: "ipsum",
read_only: true
});
createPasswordPropertyWithButton(config) pgFields.lorem =
propertyGrid.createPasswordPropertywithButton({
buttonDisabled:
});
3.4 Customizing the Command Bars

This example of User Interface customization allows you to change the behavior of every Command Bar in the
application.
Procedure
2. Create a service called [controller Name]_custom into
3. Create a function called commandBarConfig inside the service.

Customizing the Command Bars

.service('workOrderStatus_workOrderList_Ctrl_custom', ['$state',
workOrderStatus_workOrderList_Ctrl_custom]);
function workOrderStatus_workOrderList_Ctrl_custom($state) {
var button = {
type: 'Command',
name: 'name',
image: 'fa-sitemap',
label: 'Custom Button',
onClickCallback: function () {
$state.go('home.Siemens_SimaticIT_U4DM_AppU4DM_workOrder.customadd')
},
visibility: false
};
//CUSTOMIZE ICV
this.icvConfig = function (standardConfig) {
var newColumn = {
field: newField,
displayNameKey: newFieldDisplayText,
type: 'string'
};
standardConfig.gridConfig.columnDefs.unshift(newColumn);
var newColumn2 = {
field: newDTField,
displayNameKey: newDTFieldDisplayText,
type: 'string'
};
standardConfig.gridConfig.columnDefs.unshift(newColumn2);
var newColumn3 = {
field: "ProcessNId",
displayNameKey: "Process NId",
type: 'string'
};
standardConfig.gridConfig.columnDefs.unshift(newColumn3);
standardConfig.mediumTileTemplate = mediumTileTemplate;
var oldsc = standardConfig.onSelectionChangeCallback;
standardConfig.onSelectionChangeCallback = function (selected) {
oldsc(selected);
if (selected && selected.length > 0) {
button.visibility = true;
} else {
button.visibility = false;
}
}
return standardConfig;
};
this.commandBarConfig = function (standardConfig) {
standardConfig.bar.push(button);
}
}

Customizing the Menu Buttons
3.5 Customizing the Menu Buttons

This example of User Interface customization allows you to modify the behavior of the Menu Buttons of the
application.
Procedure
2. Create a service called [Controller Name]_custom into
3. Create a function called menuButtonConfig inside the service.

.service('workOrderStatus_workOrderList_Ctrl_custom',
[workOrderStatus_workOrderList_Ctrl_custom]);
function workOrderStatus_workOrderList_Ctrl_custom() {
//CUSTOMIZE ICV
this.menuButtonConfig = function (standardConfig) {
standardConfig.menuItems.push({
label: "Test",
name:
"Siemens.SimaticIT.U4DM.MsExt.FB_OP_EXT.OEModel.Commands.CreateWorkOrderFromProcess",
onClickCallback: function () {}
});
};
}
3.6 Customizing the Tab Controls

This example of User Interface customization allows you to add or remove tabs in the Tab Controls of the
application.
 Task Details UI Component Customization

For information on how to customize the Task Details UI Component tab, see Task Details UI Component
(Deprecated).
Procedure
1. Create a .js file inside a custom folder of your custom App.
2. Create a service called [Controller Name]_custom inside
3. Create a function called tabsConfig inside the service.
Example for Work Orders Page

Customizing oData Queries and Backend Commands

.service('workOrderStatus_workOrderStatusSelect_Ctrl_custom', ['u4dm.services',
workOrderStatus_workOrderStatusSelect_Ctrl_custom]);
function workOrderStatus_workOrderStatusSelect_Ctrl_custom() {
this.tabsConfig = function (tabs) {
tabs.push({
heading: 'CUSTOMTAB',
route:
'home.Siemens_SimaticIT_U4DM_AppU4DM_workOrder.select.customtab',
active: false
});
return tabs;
};
}
3.7 Customizing oData Queries and Backend Commands

This example of User Interface customization shows how you can override oData queries and Backend Commands
called by the User Interface through the API services. This allows you to retrieve custom data.
Every module must have a service containing the logic of the module, and the module service must contain all the
calls to the backend.
Procedure
2. Create a service called [Service Name]_custom into the
Siemens.SimaticIT.U4DM.AppU4DM.services.customServices module
3. Do either of the following:
• Create a function called getAll inside the service to customize the retrieval function.
• Create a function called getAll_inject inside the service to customize the retrieval function using the
standard one provided by Opcenter EX DS (passed as parameter)
4. Do either of the following:
• Create a function called [Command Name] inside the service to customize the creation from process of
the Work Order
• Or create a function called [Command Name]_inject inside the service to customize the update
function using the standard UADM one (passed a s parameter)

Customizing oData Queries and Backend Commands

.service('workOrderStatus_Svc_custom ', ['u4dm.services', '$q', '$timeout',
workOrderStatus_Svc_custom ]);
function workOrderStatus_Svc_custom (u4dmSvc, $q, $timeout) {
var workOrderOptions =
'$expand=ProducedMaterialItems($expand=MaterialItem),FinalMaterial($select=NId,
Name,Revision),ProductionType($select=NId),WorkOrderOperations';
//OVERRIDE getAll function of the original workOrderStatusService service
this.getAll = function (options) {
var query = u4dmSvc.api.tools.chainQuery(options, workOrderOptions);
return u4dmSvc.api.workOrder.getAll(query).then(function (result) {
//ADD FAKE VALUE
result.value.forEach(function (wo) {
wo[newField] = wo.NId + '_custom';
});
return result;
});
};
//OVERRIDE getAll function of the original workOrderStatus_Svc service

injection mode example
this.getAll_inject = function (standard) {
function myGetAll(options) {
return standard(options).then(function (result) {
//ADD FAKE VALUE
result.value.forEach(function (wo) {
wo[newField] = wo.NId + '_custom';
});
return result;
});
}
return myGetAll;
};
this.createFromProcess = function (item) {
var payload = createPayload(item);
var deferred = $q.defer();
//FAKE ASYNC CALL
$timeout(function () {
deferred.resolve(true);
}, 100);
return deferred.promise;
};
function createPayload(data) {
var payload = {};
///ADD HERE CUSTOM DATA MANAGEMENT
payload[newField] = 'newValue';
return payload;
}
this.updateWorkOrder = function (item) {
var payload = createPayload(item);
var deferred = $q.defer();
//FAKE ASYNC CALL

Customizing the Icons
deferred.resolve(true);
}, 100);
return deferred.promise;
};
}
3.8 Customizing the Icons

This example of User Interface customization allows you to change the icon of every page in the whole application.
Procedure
2. Create a service called u4dm.services.icons_custom into
3. Create a function called customizeIcons inside the service.
(function () {
'use strict';

;
mod.service('u4dm.services.icons_custom', [
myIconsService
]);
function myIconsService(customizator) {
this.customizeIcons = function (icons) {

//modify the collection
return icons;
}
}
})();
3.9 Customizing the Default UI Configuration

This example of User Interface customization allows you to modify the default configuration of the User Interface.
For example, it allows you to change how the grids are displayed, their pagination options, which filters are active,
and so on.
Procedure
2. Create a service called u4dm.ui.configuration_custom into
3. Create a function called customizeUIDefaults inside the service.

Customizing the Default UI Configuration
(function () {
'use strict';

;
mod.service('u4dm.ui.configuration_custom', [
u4dmUIConfiguration
]);
function u4dmUIConfiguration(customizator) {
this.customizeUIDefaults = function (uiConfiguration) {

//change the UI Defaults
uiConfiguration.icv.defaultOptions.viewMode = 'g';
return uiConfiguration;
}
}
})();

Opcenter Execution Discrete UI Modules
Customizing the Default UI Configuration
4 Opcenter Execution Discrete UI Modules

User Interface Modules used by Opcenter Execution Discrete are of three types:
• Standard UI Modules, created with Javascript code;
• Mashup UI Modules, created with Opcenter Execution Foundation Mashup Editor;
• Model-driven UI Modules, created without writing code, starting from the implemented data model and
business logic.
 The Standard UI Modules and Mashup UI Modules listed below are all related to the AppU4DM App.
All other Opcenter Execution Discrete Apps and Extension Apps only contain Model-driven UI Modules.
To retrieve the list of all Model-driven UI modules by App/Extension App, log in to Opcenter EX FN
Solution Studio as explained in section Model-driven UI Modules.
Standard UI Modules
• CLM Resource Management
• Configuration Keys
• DCD Engineering
• Defect Type Management
• Document Management
• Genealogy
• Labor Tracking Management
• Non-Conformance Lifecycle
• Non-Conformance Notification Management
• Non-Conformance Supervisor Management
• Operation/Step Category
• Order Work In Progress
• Process Catalog Management (Deprecated)
• Team Management
• Transport Operation Landing UI Module
• Users and Skills
• Work Order As Built
• Work Order As Planned BOP
• Work Order Status (Deprecated)
Mashup UI Modules and related Screens

• High Automation
• High Automation Details Screen
• High Automation Operator Landing Screen
• Operator Landing
• Operator Detail Screen
• Operator Detail Steps Screen
• Operator Landing Task List Screen
• Operator Landing Home Screen
Model-driven UI Modules
To retrieve the list of Model-driven UI Modules:
1. From Windows Apps, in the Siemens Automation category, click the Opcenter EX FN Solution Studio link.
2. In the web page, log in to the Opcenter EX FN Solution Studio in either of the following ways:

CLM Resource Management UI Module
• Insert the credentials of the user with administrator rights and click Sign In.
• Click Use your current Windows session to Log In link to access the application with the current user
credentials.
3. In the home page, click the link to the Opcenter EX DS solution.
4. In the User Interface > UI Applications page, select the Opcenter EX DS solution and click Open.
5. The Model-driven UI Modules are those indicated with ModelDriven in the UI Module Type column.
4.1 CLM Resource Management UI Module

This UI module manages features related to the CLM Resources.
Name
Siemens.SimaticIT.U4DM.AppU4DM.CLMResourceMgt
Screens and Angular States

Screen Angular State
CLM Resource Management home.Siemens_SimaticIT_U4DM_AppU4DM_CLMResourceM

gt
Angular Controllers related to the Module

Name File Name
clmResourceMgt_list_Ctrl clm-resource-mgt-list-ctrl.js
Services related to the Module

Name File Name
clmResourceMgt_Svc clm-resource-mgt-srv.js
4.2 Configuration Keys UI Module

This UI module manages the Configuration Keys used to customize the application behavior.
Name
Siemens.SimaticIT.U4DM.AppU4DM.configKeys

Configuration Keys home.Siemens_SimaticIT_U4DM_AppU4DM_configKeys

DCD Engineering UI Module

Name File Name
configKeys_list_Ctrl configKeys-list-ctrl.js
commandsCtrl commands.js

Name File Name
configKeys_Svc configKeys-srv.js
4.3 DCD Engineering UI Module

This UI module manages features related to Data Collections.
Name
Siemens.SimaticIT.U4DM.AppU4DM.workInstruction

DCD Engineering home.Siemens_SimaticIT_U4DM_AppU4DM_altengineering
PMI2ALT home.Siemens_SimaticIT_U4DM_AppU4DM_workInstruction_pmi
2alt

Name File Name
pmi2altCtrl pmi2alt-ctrl.js
workInstruction_altEng_Ctrl workInstruction-alteng-ctrl.js
workInstruction_altRuntime_Ctrl workInstruction-altruntime-ctrl.js
workInstruction_list_Ctrl workInstruction-list-ctrl.js

Name File Name
workInstruction_Svc workInstruction-srv.js

Defect Type Management UI Module
4.4 Defect Type Management UI Module

This UI module manages features related to the Defect Types.
Name
Siemens.SimaticIT.U4DM.AppU4DM.defectTypeMgt

Defect Type Management home.Siemens_SimaticIT_U4DM_AppU4DM_defectMgt_Type_

Defects

Name File Name
defectTypeMgt_add_Ctrl defectTypeMgt-add-ctrl.js
defectTypeMgt_addMachine_Ctrl defectTypeMgt-add-machine-ctrl.js
defectTypeMgt_addMaterial_Ctrl defectTypeMgt-add-materials-ctrl.js
defectTypeMgt_addGroup_Ctrl defectTypeMgt-group-list-ctrl.js
defectTypeMgt_groups_Ctrl defectTypeMgt-groups-ctrl
defectTypeMgt_groupsList_Ctrl defectTypeMgt-groups-list-ctrl.js
defectTypeMgt_list_Ctrl defectTypeMgt-list-ctrl.js
defectTypeMgt_list_edit_Ctrl defectTypeMgt-list-edit-ctrl.js
defectTypeMgt_select_Ctrl defectTypeMgt-select-ctrl.js
defectTypeMgt_selectDetails_Ctrl defectTypeMgt-select-details-ctrl.js
defectTypeMgt_selectMachines_Ctrl defectTypeMgt-select-machine-ctrl.js
defectTypeMgt_selectMaterials_Ctrl defectTypeMgt-select-materials.js

Name File Name
defectTypeMgt_Svc defectTypeMgt-srv.js

Document Management UI Module
4.5 Document Management UI Module

This UI module manages features related to Documents.
Name
Siemens.SimaticIT.U4DM.AppU4DM.document

Document Management home.Siemens_SimaticIT_U4DM_AppU4DM_document

Name File Name
document_download_Ctrl document-download-ctrl.js
document_list_Ctrl document-list-ctrl.js

Name File Name
documentsvc document-srv.js
4.6 Genealogy UI Module

This UI module manages features related to Item Genealogy.
Name
Siemens.SimaticIT.U4DM.AppU4DM.Genealogy

Genealogy home.Siemens_SimaticIT_U4DM_AppU4DM_genealogy

Name File Name
genealogy_Ctrl genealogy-ctrl.js

High Automation Mashup UI Module
Name File Name
genealogy_materialNote_Ctrl genealogy-disassemble-material-note-ctrl.js
genealogy_powderGenealogy_Ctrl powderGenealogy-ctrl.js

Name File Name
genealogy_Svc genealogy-svc.js
genealogy_Tree_Svc genealogy-tree-svc.js
4.7 High Automation Mashup UI Module

This UI Module manages the features related to the High Automation Operator Landing Page.
Name
Siemens.SimaticIT.U4DM.AppU4DM.highAutomationOpLanding

High Automation Operator Landing Screen home.UADM_highAutomationOpLanding_operatorLandi

ng
High Automation Details Screen home.UADM_highAutomationOpLanding_operatorDetail

s
High Automation Operator Task List Screen home.U4DM_highAutomationOpLanding_operatorDetail

sTask

Name File Name
UADM.highAutomationOpLanding mashup-module.js

High Automation Mashup UI Module
Name File Name
u4dm.services.runtime u4dm-runtime-service.js
u4dm.services.runtime.wooperations uadm-runtime-wo-operations.js
u4dm.services.runtime.utils uadm-runtime-utils-service.js
4.7.1 High Automation Details Screen

This Screen belonging to the High Automation Mashup UI Module allows Operators to monitor production and track
material consumption.
Name
Siemens.SimaticIT.U4DM.AppU4DM.highAutomation.operatorDetails
Angular Controllers related to the Screen

Name File Name
UI Components related to the Screen

• High Automation Header Bar
• Material Tracking
• Document Preview
• Customizable Button Bar
4.7.2 High Automation Operator Landing Screen

This Screen belonging to the High Automation Mashup UI Module allows Operator to browse and select a piece of
Equipment where to monitor production.
Name
Siemens.SimaticIT.U4DM.AppU4DM.highAutomation.operatorLanding

Name File Name
UADM.highAutomationOpLanding.operatorLanding mashup-module.js

• High Automation Equipment List

Labor Tracking Management UI Module
4.7.3 High Automation Operator Task List Screen

This Screen belonging to the the High Automation Mashup UI Module allows Operators to monitor production and
perform the activities required by the available runtime tasks.
Name
operatorDetailsTask

Name File Name

• Task Container
4.8 Labor Tracking Management UI Module

This UI module implements features related to manual management of Labor Tracking.
Name
Siemens.SimaticIT.U4DM.AppU4DM.laborTrackingMgt

Production Coordinator Dashboard home.Siemens_SimaticIT_U4DM_AppU4DM_pc_dashboar

d
Production Coordinator Time Update home.Siemens_SimaticIT_U4DM_AppU4DM_pc_time_up

date

Name File Name
laborTrackingMgt_pcDashboardChangeWorkplace_Ctrl pc-dashboard-changewp-ctrl.js
laborTrackingMgt_pcDashboardEditView_Ctrl pc-dashboard-edit-ctrl.js
laborTrackingMgt_pcDashboardListView_Ctrl pc-dashboard-list-ctrl.js

Non-Conformance Lifecycle UI Module
Name File Name
laborTrackingMgt_pcDashboardSelectView_Ctrl pc-dashboard-select-ctrl.js
laborTrackingMgt_pcTimeUpdateListView_Ctrl pc-time-update-list-ctrl.js
laborTrackingMgt_pcTimeUpdateSelectView_Ctrl pc-time-update-select-ctrl.js
laborTrackingMgt_pcTimeUpdateSelectHistoryAdd_Ctr pc-time-update-select-history-add-ctrl.js
l
laborTrackingMgt_pcTimeUpdateSelectHistoryEditVie pc-time-update-select-history-edit-ctrl.js
w_Ctrl
laborTrackingMgt_pcTimeUpdateHistory_Ctrl pc-time-update-select-history-list-ctrl.js
laborTrackingMgt_pcTimeUpdadeSelectOperationEdit pc-time-update-select-operations-edit-ctrl.js
_Ctrl
laborTrackingMgt_pcTimeUpdateSelectOperations_Ctr pc-time-update-select-operations-list-ctrl
l

Name File Name
laborTrackingMgt_Svc labor-tracking-svc.js
4.9 Non-Conformance Lifecycle UI Module

This UI module manages features related to the lifecycles of Non-Conformances.
Name
Siemens.SimaticIT.U4DM.AppU4DM.NCLifecycleMgt

Non Conformance Lifecycle home.Siemens_SimaticIT_U4DM_AppU4DM_NCLifeCycleMgt

Name File Name
NCLlifecycle_AddEdit_Ctrl nc-lifecycle-mgt-lifecycle-add.js
NCLlifecycle_list_Ctrl nc-lifecycle-mgt-list-ctrl.js

Non-Conformance Notification Management UI Module
Name File Name
NCLlifecycle_TransitionDtails_Ctrl nc-lifecycle-mgt-select-details.js
NCLlifecycle_States_Edit_Ctrl nc-lifecycle-mgt-select-states-edit.js
NCLlifecycle_States_Ctrl nc-lifecycle-mgt-select-states.js
NCLlifecycle_TransitionAddEdit_Ctrl nc-lifecycle-mgt-select-transition-add.js
NCLlifecycle_Transition_Graph nc-lifecycle-mgt-select-transition-flow.js
NCLlifecycle_AssignNotificationOnTransition_Ctrl nc-lifecycle-mgt-select-transition-notification
NCLlifecycle_AssignRoleToTransition_Ctrl nc-lifecycle-mgt-select-transition-roles.js
NCLlifecycle_TransitionList_Ctrl nc-lifecycle-mgt-select-transition.js
NCLlifecycle_SelectLifecycle_Ctrl nc-lifecycle-mgt-select.js
NCLlifecycle_StatusAdd_Ctrl nc-lifecycle-mgt-status-add.js
NCLlifecycle_SelectState_Ctrl nc-lifecycle-mgt-status.js

Name File Name
ncLifecycle_Svc nc-lifecycle-mgt-srv.js
4.10 Non-Conformance Notification Management UI Module

This UI module manages features related to the notification of the various Non-Conformance messages.
Name
Siemens.SimaticIT.U4DM.AppU4DM.NCNotificationMgt

Non Conformance Notification Management home.Siemens_SimaticIT_U4DM_AppU4DM_NCNotificat

ionMgt

Non-Conformance Supervisor Management UI Module
Name File Name
NCNotificationMgt_ncNotificationMgtAccept_Ctrl nc-notification-mgt-accept-ctrl.js
NCNotificationMgt_ncNotificationMgt_Ctrl nc-notification-mgt-list-ctrl.js
NCNotification_ncNotificationMgtReject_Ctrl nc-notification-mgt-reject-ctrl.js
NCNotificationMgt_ncNotificationMgtselect_Ctrl nc-notification-mgt-select-ctrl.js

Name File Name
ncNotificationMgt_Svc nc-notification-mgt-srv.js
4.11 Non-Conformance Supervisor Management UI Module

This UI module implements the operations that the Production Coordinator can perform on the various Non-
Conformances.
Name
Siemens.SimaticIT.U4DM.AppU4DM.NCSupervisor

Non Conformance Supervisor Management home.Siemens_SimaticIT_U4DM_AppU4DM_NCSupervi

sor
Non Conformance Change Management home.Siemens_SimaticIT_U4DM_AppU4DM_NCChange

Name File Name
ncSupervisor_ncChangeAccept_Ctrl nc-change-accept.js
ncSupervisor_ncChangeAdd_Ctrl nc-change-add.js
ncSupervisor_ncChangeList_Ctrl nc-change-list-ctrl.js
ncSupervisor_ncChangeReject_Ctrl nc-change-reject-ctrl.js
ncSupervisor_ncChangeSelect_View nc-change-select-ctrl.js

Operation/Step Category UI Module
Name File Name
ncSuperVisor_ncChangeSelectDetails_Ctrl nc-change-select-details-ctrl.js
ncSupervisor_addDefect_Ctrl nc-supervisor-add-defect-ctrl.js
ncSupervisor_changeStatus_Ctrl nc-supervisor-changestatus-ctrl.js
ncSupervisor_list_Ctrl nc-supervisor-list-ctrl.js
ncSupervisor_select_Ctrl nc-supervisor-select-ctrl.js
ncSupervisor_selectDefects_Ctrl nc-supervisor-select-defects-ctrl.js
ncSupervisor_selectDetails_Ctrl nc.js-supervisor-select-details-ctrl
ncSupervisor_selectDocuments_Ctrl nc-supervisor-select-documents-ctrl.js
ncSupervisor_selectHistory_Ctrl nc-supervisor-select-history-ctrl.js
ncSupervisor_selectMachines_Ctrl nc-supervisor-select-machines-ctrl.js
ncSupervisor_selectMaterialItems_Ctrl nc-supervisor-select-materials-ctrl.js
ncSupervisor_selectTools_Ctrl nc-supervisor-select-tools-ctrl.js

Name File Name
ncSupervisor_Svc nc-supervisor-srv.js
4.12 Operation/Step Category UI Module

This UI module implements features related to Operation/Step Category management.
Name
Siemens.SimaticIT.U4DM.AppU4DM.OperationStepCategory

Operation/Step Categories home.Siemens_SimaticIT_U4DM_AppU4DM_operationStepC

ategory

Operator Landing Mashup UI Module
Name File Name
operationStepCategory_select_Ctrl operation-step-category-select-ctrl.js
operationStepCategory_selectDetails_Ctrl operation-step-category-select-details-ctrl.js
operationStepCategory_selectAssociations_add_Ctrl operation-step-category-select-associations-add-
ctrl.js
operationStepCategory_selectAssociations_Ctrl operation-step-category-select-associations-ctrl.js
operationStepCategory_selectInterlocking_Ctrl operation-step-category-select-interlocking-ctrl.js

Name File Name
operationStepCategory_Svc operation-step-category-srv.js
4.13 Operator Landing Mashup UI Module

This UI Module manages the features related to the Operator Landing Page.
Name
Siemens.SimaticIT.U4DM.AppU4DM.operatorLanding

Operator Landing Home Screen home.U4DM_operatorLanding_operatorLanding
Operator Detail Screen home.U4DM_operatorLanding_operatorDetails
Operator Detail Steps Screen home.U4DM_operatorLanding_operatorDetailSteps
Operator Exec Group Details Screen home.UADM_operatorLanding_execGroupDetails

Name File Name
UADM.operatorLanding mashup-module.js

Name File Name
u4dm.services.runtime u4dm-runtime-service.js
u4dm.services.runtime.wooperations uadm-runtime-wo-operations.js
u4dm.services.runtime.utils uadm-runtime-utils-service.js
u4dm.services.runtime.wosteps uadm-runtime-wo-steps.js
u4dm.services.runtime.dcd u4dm-dcd-service.js
u4dm.services.runtime.qms u4dm-runtime-qms.js
u4dm.services.runtime.execution-group-details- u4dm-execution-group-details-integration.js
integration
4.13.1 Operator Detail Screen

This Screen belonging to the Operator Landing Mashup UI Module manages the features related to the details of the
Operator.
Name
operatorDetails

Name File Name

• Operation Header Bar
• Task Details
• Button Bar
4.13.2 Operator Detail Steps Screen

This Screen belonging to the Operator Landing Mashup UI Module manages the features related to the Work Order
Operation steps in the Operator Landing Page.
Name
operatorDetailsStep


Name File Name

• Step List
• Task Container
• Button Bar
4.13.3 Operator Landing Task List Screen

This Screen belonging to the the Operator Landing Mashup UI Module manages the features related to the different
available Task.
Name
operatorDetailsTask

Name File Name

• Task Container
• Button Bar
4.13.4 Operator Landing Home Screen

This Screen belonging to the the Operator Landing Mashup UI Module manages the main features of the Operator
Landing page.
Name
operatorLanding

Name File Name

• Operation List

Order Work In Progress UI Module
• Button Bar
• Work Order Routing
4.14 Order Work In Progress UI Module

This UI module manages the features needed to monitor the progress of the current Work Order execution.
Name
Siemens.SimaticIT.U4DM.AppU4DM.WIP

Order Work In Progress home.Siemens_SimaticIT_U4DM_AppU4DM_orderWIP

Name File Name
wip_list_Ctrl Order-wip-list-ctrl.js
wip_operationList_Ctrl OrderOperation-wip-list-ctrl.js

Name File Name
wip_Svc Order-wip-srv.js
4.15 Process Catalog Management UI Module (Deprecated)

This UI module manages features related to the Process Catalog.
 This UI module is deprecated. Use Siemens.OpcenterEX.DS.BoP.ProcessCatalog.mdui UI Module

available in the BoP App instead.
Name
Siemens.SimaticIT.U4DM.AppU4DM.catalogMgt

Process Catalog Management home.Siemens_SimaticIT_U4DM_AppU4DM.catalogMgt

Team Management UI Module

Name File Name
process_catalog_add_ctrl process-catalog-add-ctrl.js
process_catalog_edit_ctrl process-catalog-edit-ctrl.js

Name File Name
catalog_Svc catalog-srv.js
process_catalog_svc process-catalog-svc.js
4.16 Team Management UI Module

This UI module implements features related to management of Teams.
Name
Siemens.SimaticIT.U4DM.AppU4DM.teamMgt

Teams home.Siemens_SimaticIT_U4DM_AppU4DM_teamMgt

Name File Name
teamMgt_selectUsersAdd_Ctrl teamMgt-select-users-add-ctrl.js

Name File Name
teamMgt_Svc teamMgt-srv.js
4.17 Transport Operation Landing UI Module

This UI module manages the features related to the execution of Transport Operations.
Name

Users and Skills UI Module
Siemens.SimaticIT.U4DM.AppU4DM.transportOperationExecution

Transport Operation Execution home.Siemens_SimaticIT_U4DM_AppU4DM_transportOpera

tionLanding

Name File Name
transport_operation_buffer_details_Ctrl transport-operation-buffer-details-ctrl.js
transport_order_details_ctrl transport-operation-details-ctrl.js
transport_order_handling_unit_ctrl transport-operation-handling-unit-ctrl.js
transport_operation_handling_unit_materials_add_ct transport-operation-handling-unit-materials-add-
rl ctrl.js
transport_order_landing_ctrl transport-operation-landing-ctrl.js
transport_order_details_select_buffer_ctrl transport-operation-select-item-ctrl.js

Name File Name
transport_operation_srv transport-operation-srv.js
4.18 Users and Skills UI Module

This UI module manages the features related to Users and Skills.
Name
Siemens.SimaticIT.U4DM.AppU4DM.users

Users home.Siemens_SimaticIT_U4DM_AppU4DM_users
Skills home.Siemens_SimaticIT_U4DM_AppU4DM_skills

Work Order As Built UI Module

Name File Name
userMgt_skillAdd_Controller skills-add-ctrl.js
usersMgt_skillsList_Ctrl skills-list-ctrl.js
usersMgt_skillSelect_Ctrl skills-select-ctrl.js
usersMgt_skillSelectDetails_Ctrl skills-select-details-ctrl.js
usersMgt_usersList_Ctrl users-list-ctrl.js
usersMgt_select_Ctrl users-select-ctrl.js
usersMgt_selectDetails_Ctrl users-select-details-ctrl.js
usersMgt_selectNpa_Ctrl users-select-npa-ctrl.js

Name File Name
users_Svc users-srv.js
skills_Svc skills-srv.js
4.19 Work Order As Built UI Module

This UI module manages the features related to historical data of Work Orders.
Name
Siemens.SimaticIT.U4DM.AppU4DM.asBuilt

Work Order As Built home.Siemens_SimaticIT_U4DM_AppU4DM_workOrder.asBui

lt

Name File Name
asBuilt_activHistory_Ctrl asBuilt-activity-history-ctrl.js

Work Order As Built UI Module
Name File Name
userTeamAssociationHistoryCtrl asBuilt-activity-history-team-ctrl.js
asBuilt_change_Ctrl asBuilt-change-ctrl.js
asBuilt_dataCollection_Ctrl asBuilt-datacollection-ctrl.js
asBuilt_dependencies_Ctrl asBuilt-dependencies-ctrl.js
asBuilt_details_Ctrl asBuilt-details-ctrl.js
asBuilt_dncDetails_Ctrl asBuilt-dnc-details-ctrl.js
asBuilt_documents_Ctrl asBuilt-document-ctrl.js
asBuilt_documents_runtime_Ctrl asBuilt-document-runtime-ctrl.js
asBuilt_hold_Ctrl asBuilt-hold-ctrl.js
asBuilt_main_Ctrl asBuilt-main-ctrl.js
asBuilt_material_Ctrl asBuilt-material-ctrl.js
asBuilt_material_history_Ctrl asBuilt-material-history-ctrl.js
asBuilt_materialNote_Ctrl asBuilt-material-note-ctrl.js
asBuilt_nonConformance_buyoff_Ctrl asBuilt-nonconformance-buyoff-ctrl.js
asBuilt_nonConformance_Ctrl asBuilt-nonconformance-ctrl.js
asBuilt_notes_Ctrl asBuilt-note-ctrl.js
asBuilt_operation_Ctrl asBuilt-operation-ctrl.js
asBuilt-operation-setpoints-ctrl asBuilt-operation-setpoints-ctrl.js
asBuilt_Pjf_Ctrl asBuilt-pjf-ctrl.js
asBuilt_qualityInspection_Ctrl asBuilt-qualityinspection-ctrl.js
asBuilt_reopenBatch_Ctrl asBuilt-reopen-batch-srv.js
asBuilt_reopenSerialize_Ctrl asBuilt-reopen-serialize-ctrl.js
asBuilt_rework_Ctrl asBuilt-rework-ctrl.js
asBuilt_serialNumber_Ctrl asBuilt-serialnumber-ctrl.js
asBuilt_step_Ctrl asBuilt-step-ctrl.js

Work Order As Planned BOP UI Module
Name File Name
asBuilt_subtrates_Ctrl asBuilt-substrate-ctrl.js
asBuilt_tools_Ctrl asBuilt-tool-ctrl.js
asBuilt-tool-setpoints-ctrl asBuilt-tool-setpoints-ctrl.js
asBuilt_workInstruction_automationNodeDetails_Ctrl asBuilt-workinstruction-automationNodeDetails-
ctrl.js
asBuilt_workInstruction_Ctrl asBuilt-workinstruction-ctrl.js

Name File Name
asBuilt_Svc asBuilt-srv.js
4.20 Work Order As Planned BOP UI Module

This UI module manages the features related to historical data of Bills Of Processes.
Name
Siemens.SimaticIT.U4DM.AppU4DM.asPlannedBOP

Work Order As Planned BOP home.Siemens_SimaticIT_U4DM_AppU4DM_asPlannedBOP_

workOrder

Name File Name
asPlannedBOP_List_Ctrl asPlannedBOP-list-ctrl.js
asPlannedBOP_Select_Ctrl asPlannedBOP-select-ctrl.js

Name File Name
asPlannedBOP_Svc asPlannedBOP-srv.js

Work Order Status UI Module (Deprecated)
4.21 Work Order Status UI Module (Deprecated)

This UI module manages several features, primarily related to pre-kitting.
 This UI module is deprecated. Use

Siemens.SimaticIT.U4DM.AppU4DM.WorkOrderPreKitting.mdui MDUI Module available in
AppU4DM instead.
Name
Siemens.SimaticIT.U4DM.AppU4DM.workOrderStatus
Screen and Angular States

Work Order Prekit home.Siemens_SimaticIT_U4DM_AppU4DM_workOrder_prekit

Name File Name
skillsSelectionAddToWorkOrderOperationCtrl workorder-operation-skill-add-ctrl.js
workOrderStatus_MasterPlanOperationAdd_Ctrl workorder-mp-operation-add-ctrl.js
workOrderStatus_workOrderAdd_Ctrl workorder-add-ctrl.js
workOrderStatus_workOrderAddSerialNumber_Ctrl workorder-select-serialnumber-add-ctrl.js
workOrderStatus_workOrderAlternativeOperationsGro workorder-select-alternative-operations-add-ctrl.js
upAdd_Ctrl
w workorder-select-alternative-operations-edit-ctrl.js
orkOrderStatus_workOrderAlternativeOperationsGrou
pEdit_Ctrl
workOrderStatus_workOrderMerge_Ctrl workorder-merge-ctrl.js
workOrderStatus_workOrderOperationAdd_Ctrl workorder-operation-add-ctrl.js
workOrderStatus_workOrderOperationSelectDepende workorder-select-operations-dependencies.js
ncies_Ctrl
workOrderStatus_workOrderOperationSelectDetails_C workorder-operation-select-details-ctrl.js
trl
workOrderStatus_workOrderPrekitDetails_Ctrl workorder-prekit-details-ctrl.js
workOrderStatus_workOrderPrekitEditView_Ctrl workorder-prekit-edit-ctrl.js

Work Order Status UI Module (Deprecated)
Name File Name
workOrderStatus_workOrderPrekitList_Ctrl workorder-prekit-list-ctrl.js
workOrderStatus_workOrderStatusPrekitSerialNumber workorder-prekit-snsearch-list-ctrl.js
Search_Ctrl

Name File Name
workOrderStatus_Svc workorder-status-srv.js

Opcenter Execution Discrete UI Components
Button Bar UI Component
5 Opcenter Execution Discrete UI Components

User Interface Components are objects which can be deployed on a page to create a graphical interface for an
application.
Opcenter Execution Discrete provides you with a set of UI Components dedicated to the management of its internal
functionalities.
Available UI Components
• Button Bar
• Declare Defect
• Execution Group Details
• Execution Groups Document Preview
• Execution Groups Header Bar
• High Automation Equipment List UI Component
• Material Production
• Material Tracking
• Operation List
• Part Program
• Print Job File
• Quality Inspection
• Step List
• Task Details (Deprecated)
• Task Container
• Task Viewer
• Work Order Routing
• Zero Touch Component Manager
5.1 Button Bar UI Component

This User Interface component displays the Button Bar User Interface Component.
Name
siemensSimaticitU4dmAppu4dmButtonbar
Layout
Size Rows Columns
Default 1 12
Min 1 1
Max 12 12
Destination Methods

Destination Method Description Parameters
setStartVisible Changes visibility of the Start button. visible (boolean)
setPauseVisible Changes visibility of the Pause button. visible (boolean)
setSkipVisible Changes visibility of the Skip button. visible (boolean)
setCompleteVisible Changes visibility of the Complete button. visible (boolean)
setCompleteStepsVisible Changes visibility of the Complete Steps visible (boolean)

button.
setGoToDetailVisible Changes visibility of the Go To Detail visible (boolean)

button.
initialize Initializes buttons in the bar. buttonStatus (object)
setCurrentOperationId Sets the current Work Order Operation Id. wooId (number)
setActionVisible Sets visibility of menu items in Action selectedOperations (object)

button.
updateButtonVisibility Updates the visibilty of a button. id (string)
updateButtonsStates Sets multiple buttons states (enable or buttonStates (array)

disable).
Source Events
Source Event Description Parameters
start User clicked Start
pause User clicked Pause
skip User clicked Skip
complete User clicked Complete
completeSteps User clicked Complete Steps
goToDetail User clicked Go To Detail
goToDetailSteps User clicked Go To Detail and steps exist
goToExecutionGroupDetails User clicked go to detail and execution execGroupPhaseId (string)

group exist
setContextProperty_mode Sets the mode context property. mode (string)

setContextProperty_isPoc Set the isPoc context property.
goToDeclareDefect Opens the Declare Defect mashup.
setContextProperty_wooId Sets Work Order Operation Id to context. wooId (number)
team Manages team configuration. teamId (string)
buttonClicked The user wants to click the custom • id(string)

button • data(Object)
startSteps User started a step.
Customization
The following customizations on the ButtonBar UI Component are possible:
• hide standard buttons
• add custom buttons, with related custom business logic.
The following buttons are available by default:
• Start
• Pause
• Skip
• Complete
• StepComplete
• AddDocument
• goToInterlocking
• Notes
• Defects
• ChangeNonConformance
• Travelling
• ExecutionGroupLink
• RequestMaterial
• JoinTeam
• leaveTeam
• showDocumentPreview
• labelPrinting
• goToChangeSerialNumbers
• goToGenealogyLink
• freezeTargetQuantity
• woAbruptClosure
To customize the ButtonBar UI Component:
1. In the Opcenter Execution Foundation Solution Studio environment, select User Interface > Mashups.
2. Open the OperatorLanding > operatorDetailsTask UI Screen.
 You can also customize the ButtonBar UI Component contained in the operatorLanding
and operatorDetailsStep UI Screens in the same manner.
3. Select the ButtonBar UI Component and click configuration.

Customizable Button Bar UI Component
4. To customize the behavior of each button, update the value of the tags of interest, as follows:
• To hide a button, set visibility to "false".
• To disable a button, set disabled to "false".
• To change the icon of the button, provide the path to the new icon.
• To change the alignment of the button, set align to "right".
• To add a custom button, copy the code provided for a standard button (see for example the code relative
to the Start button in the box below) and change the values accordingly. Make sure that the required
business logic is also available and linked to the button while configuring the wiring.
{
"type": "Command",
"id": "start",
"name":
"Siemens.SimaticIT.U4DM.AppU4DM.AppU4DM.DMPOMModel.Commands.UADMStartOperati
on",
"unauthorizedBehavior": "hide",
"svgIcon": "common/icons/cmdStart24.svg",
"label": "sit.u4dm.start",
"visibility": true,
"disabled": true,
"align": "left"
},
5. Click Apply
5.2 Customizable Button Bar UI Component

This User Interface component displays the Customizable Button Bar User Interface Component.
Name
siemensSimaticitU4dmAppu4dmCustomizablebuttonbar
Layout
Size Rows Columns
Default 2 12
Min 2 2
Max 4 12
Destination Methods
updateButtonVisibility Updates the visibility of the Button • id(string)

• visibility(Boolean)
• disabled(Boolean)

Customizable Button Bar UI Component
configureButtonBar Configures the Button Bar config(Object)
updateButtonsStates Sets multiple buttons states (enable or buttonStates(Array)

disable)
Source Events
buttonClicked The user wants to click the custom button • id(string)

• data
(Object)
workOrderOperationStartByUser The user wants to start the Work Operation
workOrderOperationPauseByUser The user wants to Pause the Work Operation
workOrderOperationCompleteByUser The user wants to complete the Work Operation
manageTeam Manages the team configuration teamId(string)
changeMachine User wants to change the machine
toggleDocumentPreview User wants to toggle the visibility of the

Document Previewer
Customization
The following customizations on the CustomizableButtonBar UI Component are possible:
• hide standard buttons
• add custom buttons, with related custom business logic.
The following buttons are available by default:
• Start
• Pause
• Complete
• AddDocument
• Defects
• ChangeNonConformance
• RequestMaterial
• Notes
• JoinTeam
• leaveTeam
• ChangeMachine.

High Automation Header Bar UI Component
For more information, see section Configuring Runtime Screens of the Opcenter Execution Discrete Installation and
Configuration Manual.
5.3 High Automation Header Bar UI Component

This User Interface component displays a high automation Header Bar with summary information for a Work Order
Operation.
Name
siemensSimaticitU4dmAppu4dmHighautomationheaderbar
Layout
Size Rows Columns
Default 2 12
Min 1 12
Max 2 12
Destination Methods
setWorkOrderOperation Sets the Work Order Operation the workOrderOperationId

component is showing information about (number)
setParentState Sets a value identifying the parent state parent (string)
initialize Initializes the header bar workCenter(object)
Source Events
goToParent Goes to mashup defined as parent of this one. stateId (string)
5.4 Declare Defect UI Component

This User Interface component allows to declare and update Defects and Non-Conformances.
Name
siemensSimaticitU4dmAppu4dmDeclaredefect
Layout

Document Preview UI Component
Size Rows Columns
Default 6 6
Min 6 6
Max 12 12
Destination Methods
initialize Initializes the component. param (string)
Source Events
goToDetail Goes to the parent Detail mashup
5.5 Document Preview UI Component

This User Interface component displays a list of Documents and allows you to preview them.
Name
siemensSimaticitU4dmAppu4dmDocumentpreview
Layout
Size Rows Columns
Default 8 4
Min 6 3
Max 10 6
Destination Methods
initializeDocuments Initialize the document list • wooId (number)

• wosId (number)
Source Events

Execution Group Details UI Component
docClick Fires when a document is clicked docId (string)
5.6 Execution Group Details UI Component

This User Interface component displays a series of tabs to show the details of Execution Groups.
Name
siemensSimaticitU4dmAppu4dmExecgroupdetails
Layout
Size Rows Columns
Default 8 8
Min 6 4
Max 12 12
Destination Methods
loadDetails Loads the Details screen. • execGroupPhaseNId

(string)
• currentTabId (string)
startExecutionGroupPhaseOperat Starts all selected execution Group

ions phases.
completeExecutionGroupPhase Completes all selected execution Group

phases.
pauseExecutionGroupPhase Pauses all selected execution Group

phases.
Source Events
refresh Fires when starting operations. executionGroupPhaseId (string)
5.7 Execution Groups Document Preview UI Component

This User Interface component displays a list of Documents to be shown during execution of Execution Groups and
allows you to preview them.

Execution Groups Header Bar UI Component
Name
siemensSimaticitU4dmAppu4dmExecgroupdocumentpreview
Layout
Size Rows Columns
Default 8 4
Min 6 3
Max 12 12
Destination Methods
refreshDocuments Refreshes the component showing tabs available execGroupId (number)

for the exec group current phase.
5.8 Execution Groups Header Bar UI Component

This User Interface component displays a Header Bar with summary information for an Execution Group.
Name
siemensSimaticitU4dmAppu4dmExecgroupheaderbar
Layout
Size Rows Columns
Default 2 12
Min 1 1
Max 12 12
Destination Methods
getExecutionGroupPhaseDetails Retrieves details about the selected execGroupPhaseId (string)

Execution Group Phase.
setParentState Sets a value identifying the parent state. parent (string)
Source Events

High Automation Equipment List UI Component
goToParent Same as clicking the back button.
5.9 High Automation Equipment List UI Component

This User Interface component displays a list of Equipments inside the High Automation Landing Page.
Name
siemensSimaticitU4dmAppu4dmHighautomationequipmentlist
Layout
Size Rows Columns
Default 6 12
Min 3 3
Max 12 12
Destination Methods
setMachineAsWorkplace Sets selected Machine or Workcentre as orkplace
Source Events
EquipmentSelectionChanged Fired when an equipment selection is data (object)

changed.
EquipmentSelected Fired when an equipment is selected as the • EquipmentNId (string)

work center. • StateId (string)
5.10 Material Production UI Component

This User Interface component keeps track of production of co-products and by-products.
Name
siemensSimaticitU4dmAppu4dmMaterialproductioncomponent
Layout

Material Tracking UI Component
Size Rows Columns
Default 6 6
Min 3 1
Max 12 12
Destination Methods
None.
Source Events
None.
5.11 Material Tracking UI Component

This User Interface component displays the Material Tracking User Interface component.
Name
siemensSimaticitU4dmAppu4dmMaterialtracking
Layout
Size Rows Columns
Default 6 6
Min 3 3
Max 12 12
Destination Methods
initializeMaterialTracker Initializes material tracker • WorkOrderOperation

component. (number)
• WorkOrderStep (number)
• serialNumberList (Array)
Source Events
None.
5.12 Operation Header Bar UI Component

This User Interface component displays a Header Bar with summary information for a Work Order Operation.

Operation Header Bar UI Component
Name
siemensSimaticitU4dmAppu4dmOperationheaderbar
Layout
Size Rows Columns
Default 2 12
Min 1 1
Max 12 12
Destination Methods
goToParent Same as clicking the Back button.
setWorkOrderOperation Sets the Work Order Operation the workOrderOperationId

component is showing information about (number)
setParentState Sets a value identifying the parent state parent (string)
Source Events
nextWorkOrderOperation User wants to work on the next Work Order • currentWOO

Operation (object)
• nextWOO (object)
previousWorkOrderOperation User wants to work on the previous Work • currentWOO

Order Operation (object)
• previousWOO
(object)
goToParent Goes to mashup defined as parent of this stateId (string)

one.
operationDetailsLoaded Notifies other components that details are operation (object)

loaded.
setContextProperty_wooId Sets the wooId context property. wooId (number)
setContextProperty_isPoc Sets the isPoc context property. isPoc (string)

Operation List UI Component
5.13 Operation List UI Component

This User Interface component displays the list of Work Order Operations.
Name
siemensSimaticitU4dmAppu4dmOperationlist
Layout
Size Rows Columns
Default 9 3
Min 1 1
Max 12 12
Destination Methods
startOperations Starts all selected operations.
pauseOperations Pauses all selected operations.
skipOperations Skips all selected operations.
completeOperations Completes all selected operations.
manageTeam Manages user-team relations. teamAssociationId (string)
Source Events
operationSelectionChanged User selected/unselected an operation • selections (object)

• firstSelectedWooId
(string)
allCanBeStartedChanged Whether or not all of the selected work order allCanBeStarted (boolean)
operations can be started has changed
allCanBePausedChanged Whether or not all of the selected work order allCanBePaused (boolean)
allCanBeSkippedChanged Whether or not all of the selected work order allCanBeSkipped (boolean)

Part Program UI Component
allCanBeCompletedChanged Whether or not all of the selected work order allCanBeCompleted

operations can be started has changed (boolean)
goToDetails Opens the details state detailsStateName (string)
goToDetailsSteps Opens the details with steps state detailsStateName (string)
canGoToDetailChanged Whether or not the user can go to the canGoToDetail (boolean)

operator detail state
setContextProperty_mode Sets the mode context property mode (string)
goToGenealogyLink Opens the Genealogy state
5.14 Part Program UI Component

This User Interface component manages the transfer of Part Programs to DNC Machines.
Name
siemensSimaticitU4dmAppu4dmPartprogramcomponent
Layout
Size Rows Columns
Default 3 3
Min 2 3
Max 4 4
Destination Methods
None.
Source Events
None.
5.15 Print Job File UI Component

This User Interface component displays the Print Job File Transfer Component.
Name
siemensSimaticitU4dmAppu4dmPrintjobfileComponent

Quality Inspection UI Component
Layout
Size Rows Columns
Default 3 3
Min 2 3
Max 4 4
Destination Methods
None.
Source Events
None.
5.16 Quality Inspection UI Component

This User Interface component manages the interface for Quality Inspections.
Name
siemensSimaticitU4dmAppu4dmQualityinspectioncomponent
Layout
Size Rows Columns
Default 3 3
Min 2 3
Max 4 4
Destination Methods
None.
Source Events
None.
5.17 Step List UI Component

This User Interface component displays the list of Work Order Operation steps.
Name
siemensSimaticitU4dmAppu4dmSteplist

Task Details UI Component (Deprecated)
Layout
Size Rows Columns
Default 8 2
Min 1 1
Max 12 12
Destination Methods
initialize Initial settings for the step list wooId (number)
complete Completes all selected steps.
refreshTree Refreshes the data. • wooId (number)

• refresh (boolean)
Source Events
stepSelectionChanged A new step is selected. • selectedSteps (object)

• clickedStep (object)
• wooId (number)
• wosId (number)
• selectedOperations
(object)
allStepsCanBeCompletedChang Checks if one or more steps that can be allStepsCanBeCompleted

ed completed have changed. (boolean)
5.18 Task Details UI Component (Deprecated)

This User Interface component displays the details of a task in a set of tabs.
 This UI Component is deprecated. Use the Task Container UI Component instead.
Name
siemensSimaticitU4dmAppu4dmTaskdetails
Layout

Size Rows Columns
Default 8 4
Min 6 4
Max 12 8
Destination Methods
initializeTaskDetails Initializes the component • wooId (number)

• wosId (number)
completeOperation Completes the work order operation
pauseOperation Pauses the work order operation
skipOperation Skips the work order operation
startOperation Starts the work order operation
Source Events
operationCompleted Work Order Operation has been successfully wooId (number)

completed
operationPaused Work Order Operation has been successfully wooId (number)

paused
operationSkipped Work Order Operation has been successfully wooId (number)

skipped
operationStarted Work Order Operation has been successfully wooId (number)

started
canBeStartedChanged Notifies if operation can be started canStart (boolean)
canBePausedChanged Notifies if operation can be paused canPause (boolean)
canBeCompletedChanged Notifies if operation can be completed canComplete (boolean)
operationStatusChanged Notifies that the status of current operation selections (object)

changed
Customization

Here is an example of how to create a Custom Tab containing a Widget. Your starting point is a custom tab that
displays the NId of the Work Order Operation or Step in Runtime. The value displayed changes dynamically,
depending on which Work Order Operation or Step is selected.
Here are the contents of the sitTestStep widget for what concerns sitTestStep.html:
<div>{{vm.teststep}}</div>
Here are the contents of the sitTestStep widget for what concerns sitTestStep.js:

(function () {
'use strict';
var controllerName = 'sitTestStep';

angular.module('Siemens.SimaticIT.U4DM.AppU4DM.widgets').directive(controllerName,
toSeeStepOpNid);
function toSeeStepOpNid() {
return {
restrict: 'E',
scope: {},
bindToController: {
workOrderStep: '=?sitWorkOrderStep',
workOrderOperation: '=?sitWorkOrderOperation'
},
controller: toSeeStepOpNidCtrl,
controllerAs: 'vm',
templateUrl: 'Siemens.SimaticIT.U4DM.AppU4DM/widgets/testWidGet/
testWidGet.html'
};
}
toSeeStepOpNidCtrl.$inject = ['u4dm.services.runtime', 'u4dm.services', '$q',

'$state', '$scope', '$timeout', '$window', 'u4dm.constants'];
function toSeeStepOpNidCtrl(u4dmRuntimeSvc, u4dmSvc, $q, $state, $scope,
$timeout, $window, u4dmConstants) {
var vm = this;
vm.teststep = 'null';
init();
function init() {
setWatches();
// trick ICV to resize after side panel open. ICV uses jqLite to
bind to 'resize', so this should work
angular.element($window).trigger('resize');
});
}
function setWatches() {
$scope.$watch("vm.workOrderStep", refreshWithSignals);
$scope.$watch("vm.workOrderOperation", refreshWithSignals);
}
function refreshWithSignals() {
if (vm.workOrderStep)
{ vm.teststep = vm.workOrderStep.NId; }
else

Task Container UI Component
{
vm.teststep = vm.workOrderOperation.NId;
}
}
}
})();
Here is the sitTaskDetails component customization:
(function () {
'use strict';
var mod =angular.module('Siemens.SimaticIT.U4DM.AppU4DM.services.customServices');
mod.service('sitTaskDetail_custom', ['u4dm.services', sitTaskDetail_custom]);
function sitTaskDetail_custom() {
this.tabsConfig = function (tabs) {
tabs.push({
heading: 'CUSTOMTAB',
route: 'home.Siemens_SimaticIT_U4DM_AppU4DM_workOrder.select.customtab',
active: true,
visible: true,
content: '<sit-test-step sit-work-order-step="vm.workOrderStep" sit-work-order-
operation="vm.workOrderOperation"></sit-test-step>'
});
return tabs;
};
}})();
5.19 Task Container UI Component

This User Interface component displays the list of available Tasks to be managed during production execution.
The default Tasks are:
• UADMMaterialConsumptionTask
• UADMToolUsageTask
• UADMWorkInstructionTask
• UADMQualityInspectionTask
• UADMPrintJobFilesTask
• UADMPartProgramTask
For more information on how these tasks are used at runtime, see section Managing Tasks for Work Order Operation
or Step Progression of the Opcenter Execution Discrete User Manual.
Name
siemensSimaticitU4dmAppu4dmTaskcontainer
Layout
Size Rows Columns
Default 8 4

Task Container UI Component
Size Rows Columns
6 4
Max 12 12
Destination Methods
initializeTaskDetailsForSte Initializes the Task Container UI • wooId (String that identifies the
ps Component for the Work Order Steps. Id of the Work Order Operation)
• wosId (String that identifies the
Id of the Work Order Step)
• executionGroupId (String that
identifies the Id of the Execution
Group).
initializeTaskDetailsForTas Initialized the Task Container UI • id (String that identifies the Id of

ks Component for the selected Work Order the Work Order Operation)
Operation. • executionGroupId (String that
identifies the Id of the Execution
Group).
completeOperation Completes the selected Work Order

Operation.
pauseOperation Pauses the selected Work Order

Operation.
skipOperation Skips the selected Work Order

Operation.
startOperation Starts the selected Work Order

Operation.
startStep Starts the selected Work Order Step.
Source Events
operationCompleted Work Order Operation has been wooId (String that identifies the Id of
successfully completed. the Work Order Operation)
operationPaused Work Order Operation has been wooId (String that identifies the Id of
successfully paused. the Work Order Operation)
operationSkipped Work Order Operation has been wooId (String that identifies the Id of
successfully skipped. the Work Order Operation)

Task Viewer UI Component
operationStarted Work Order Operation has been wooId (String that identifies the Id of
successfully started. the Work Order Operation)
canBeStartedChanged Notifies if the Work Order Operation can canStart (boolean)

be started.
canBePausedChanged Notifies if the Work Order Operation can canPause (boolean)

be paused.
canBeSkippedChanged Notifies if the Work Order Operation can canSkip (boolean)

be skipped.
canBeCompletedChanged Notifies if the Work Order Operation can canComplete (boolean)

be completed.
operationStatusChanged Notifies that the status of the current selections (object)

Work Order Operation has changed.
stepStarted Work Order Step has been successfully wooId (number)

started.
stepCompleted Work Order Step has been successfully wooId (number)

completed.
Customization
The following customizations on the Task Container UI Component are possible:
• customization of the component's visibility according to the status of the Task. Available statuses for Tasks
are: InProgress, Error, Paused, Ready, Suspended, NotReady, Created, Failed, Aborted, Canceled, Skipped,
Completed.
• customization of the Contextual Command bar's visibility depending on the Task type. Available Tasks
are: UADMMaterialConsumptionTask, UADMToolUsageTask, UADMWorkInstructionTask,
UADMQualityInspectionTask, UADMPrintJobFilesTask, UADMPartProgramTask.
For more information, see section Configuring Runtime Screens of the Opcenter Execution Discrete Installation and
Configuration Manual.
5.20 Task Viewer UI Component

This User Interface component displays a single Task to be managed during production execution.
For more information on how these tasks are used at runtime, see section Managing Tasks for Work Order Operation
or Step Progression of the Opcenter Execution Discrete User Manual.
Name
siemensSimaticitU4dmAppu4dmTaskviewer
Layout

Work Order Routing UI Component
Size Rows Columns
Default 6 2
Min 6 2
Max 6 12
Destination Methods
setWooId Identifier of the Work Order Operation to which id (string)

the step belongs.
Source Events
onSelectedItem Fires when the task is selected. item (string)
5.21 Work Order Routing UI Component

This User Interface component displays the Routing of Work Order Operations or Steps.
Name
siemensSimaticitU4dmAppu4dmWorkorderrouting
Layout
Size Rows Columns
Default 6 6
Min 2 2
Max 12 12
Destination Methods
SetOperationRouting Shows routing of Work Order Operations or selections (object)

Steps.
Source Events
None.

Zero Touch Component UI Component
5.22 Zero Touch Component UI Component

This User Interface component displays the Zero Touch Component User Interface component.
Name
siemensSimaticitU4dmAppu4dmZerotouchcomponent
Layout
Size Rows Columns
Default 1 1
Min 1 1
Max 6 6
Destination Methods
workOrderOperationStartByUser Starts the Work Order Operation manually
workOrderOperationCompleteByUser Completes the Work Order Operation parent (string)

manually
workOrderOperationPauseByUser Pauses the Work Order Operation workCenter

manually (object)
manageTeam Manages user-team relations team(string)
changeMachine Changes the selected machine
Source Events
onWorkOrderOperationStartedBy Fired when a Work Order Operation is • workOrderOpera

Machine automatically started by a machine tionId (Number)
• materialList(
Array)
onWorkOrderOperationCompleted Notifies other components that details are • operation

loaded (object) work
order
• operation
(Object)

Zero Touch Component UI Component
onWorkOrderOperationAssembled Fired when a work order operation is • workOrderOpera

assembled tionId(Number)
• mater(string)
initialized Fired when a component is initialized machineContext

(Object)
onMachineDeselected Fired when work-center change is clicked StateId(string)

OpcenterEXDS_UIReference

Uploaded by

Document Information

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

OpcenterEXDS_UIReference

Uploaded by

Copyright:

Available Formats

Opcenter Execution Discrete 4.

UI Reference and Customization Manual

Siemens AG PL20200729105521013 Copyright © Siemens AG 2021

Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual iii

iv Opcenter Execution Discrete4.1 - UI Reference and Customization Manual

Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual v

Title UI Reference and Customization Manual

Product Title Opcenter Execution Discrete

Version Title 4.1

Product Version OpcenterEXDS_4.1.0.0

Category Development, Support

Summary Provides information on how to customize the UI provided by

Audience System Integrator, Support Engineer, Project Engineer,

6 Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual

1 Essentials to Approaching UI Customization in Opcenter

User Interface Terminology

Page Graphical layout displayed by a browser.

Screen Root page which is the entry point of a particular concept.

State An Angular UI.Router state corresponds to a "place" in the application in

Service Function or object that is available for an Angular application. A Service

Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual 7

How are Standard and Custom UI Codes Processed?

8 Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual

2 How to Create a Custom Application

Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual 9

10 Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual

Identifying the Customizable Providers

3 How to Customize the User Interface

3.1 Identifying the Customizable Providers

Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual 11

Customizing the Item Collection Viewers

Row Section Description

providerName_custom Name of the custom Angular Provider expected by the page

FOUND/NOT FOUND • FOUND: providerName_custom is present and it has been

3.2 Customizing the Item Collection Viewers

var controllerName = 'yourControllerName';

3.2.1 Item Collector Viewer Service

ICV Service API Functions

12 Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual

Customizing the Property Grids

API Function Description Example

addFieldInGrid Adds a field object in the grid mode at options.addFieldInGrid(newfi

addFieldInTilePropertyList Adds a field object in the tile property options.addFieldInTileProper

removeFieldFromGrid Removes a field from the grid and options.removeFieldFromGrid(

removeFieldFromTilePrope Removes a field from the tile properties options.removeFieldInTilePro

3.3 Customizing the Property Grids

Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual 13

Customizing the Property Grids

var mod = angular.module('Siemens.SimaticIT.U4DM.AppU4DM.services.customServices')

function pgConfig(propGridMgr, currentEntity) {

3.3.1 Property Grid Service

Property Grid Methods and Examples

14 Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual

Customizing the Property Grids

Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual 15

Customizing the Property Grids

16 Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual

Customizing the Property Grids

Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual 17

Customizing the Property Grids

createEntityPickerPropertyWithButton(config pgFields.lorem = propertyGrid.createEntityPickerP

18 Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual

Customizing the Property Grids

Opcenter Execution Discrete 4.1 - UI Reference and Customization Manual 19