ssc ui composer overview - help.sap.com
TRANSCRIPT
2PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
Business Challenges and Requirements
About UI Composer
UI Composer Workflow
UI Composer Architecture
UI Composer Designer
UI Composer Interactive Preview
UI Composer Administrator
Agenda
4PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
Business Challenges and Requirements
Different configurable solutions have their individual look and feel.
Frequent changes in the underlying solutions require an upgrade of the UI, thus slowing down the solution rollouts.
Multiple products require large development teams.
Developing custom UIs for configurable solutions is complex and expensive.
UI customization is a strong business need for guided selling and simplification of the solution configuration flow.
There is a need to centrally develop and host configurable solutions while reusing the screens in different sales and manufacturing scenarios.
5PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
SSC UI Composer
SSC UI Composer is a WYSIWYG tool for UI designers to rapidly create one or more screens for configurable solutions and products based upon SAP SSC, IPC, or VC* knowledge bases.
UI Composer enables:– Coding free development of UI5 UIs for KBs– Rapid development through reuse of existing screens, controls, and objects– Consistent look and feel with standard fonts, colors, and sizes– Responsive UIs supported on multiple browsers and devices– Custom extension development for specific UI needs– Rendering as a separate page or embedded within an iFrame
*VC KBs should be IPC compatible as per IPC VC delta list
7PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
Configurable Solutions with SSC and UIC
Model solution and products in SSC/IPC/VC
Generate knowledge bases and test in SSC
Import KBs into UIC Drag and drop UI
elements to KB elements
Test UI and model
Integrate solutions and UIs into hosting environments like SAP Commerce or custom environments
Solution Modeling UI Modeling
Solution Hosting
8PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
Business Process Flows
Model solutions and
products
Define stores and compose
UI
Create quotation and
configure solutions
Approve quotation
SME/PMEVC UI Composer CRM / iPad iPhone
Modeler UI Designer Sales Rep. Manager
10PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
SSC and UI Composer - Integrations Overview
CRM*
NW Java
UIC Add-On
SLCC Add-On
SSC Engine
UIC Ext
SME
UI ComposerWorkspace
ManagementStore
Management
Store Preview SecurityKB
UI5 UIs
UI Designers Admins
Modelers
* UIC integrations with ECC and SAP S/4HANA can be provided on custom project basis
11PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
SSC UI Composer - High Level Architecture
Workspace Management:
Handle the user objects
Store Management: Select KB and
compose product configurator screens
Store Preview: Test the store definition in desktop and tablet
oData
Jco
Jco
UI Admins
UI Composer – SAPUI5 Based Tool
Workspace Management
Store Management Store Preview Security
SAP NW 7.4 +
SSC UI Composer Package
J2EE Engine
Workspace Backend
Management
View and store backend management R
Jco
SSCKB
WorkspaceData
StoreData
EJB-IPC
Configuration Session Layer
Configuration Engine
Order Mapper
Interactive Pricing Engine
NW Gateway content Model Provider Data Provider
R
View Data
UI Designers
KB Bean
R oData
ABAP client – Remote function module
oData provider to expose the
KB R
R
RJco
12PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
SSC UI Composer - UI5 Product Configurator High Level Architecture
Create a quotation in CRM
system
Render the product
configurator views dynamically
Configure the product and save
the quotation object
oData
Jco
Browser
SAP CRM 7 .0 Ehp 1 - NW 7 .4 SP 5
J 2 EE Engine
R
Jco
SSC Standard Components
cBaseConfiguration Repository
Session Bean
Factory MDB
R
R
R
R
EJB - IPC
Configuration Session Layer
Configuration Engine
Order Mapper
Interactive Pricing Engine
RoData
NW Gateway Model Provider Data Provider
R
Sales Rep
R
Launch
XMLConfiguration
Integration layer
UI 5 Product Configurator
Configuration Handler Security
Quotation Fiori App
Product Catalog
Product Details Page
Configure Product
One Order
Quote
R
Back
R
13PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
SSC UI Composer – User Roles
UI Designer– UI designers can create store definitions and configuration screens for SSC knowledge bases, using the
predefined templates, pages, controls, and objects within the UI Composer.– They are authorized to commit store definitions.– They can create a new version of an individual store if it has already been committed or published.
UI Administrator– UI administrators are authorized to publish the store definitions created by UI designers.– They can create pre-defined pages via master store data.– Administrators can unlock and delete store definitions.– UI developers with admin authorization can extend UI Composer to create store templates for common
use, and custom UI controls for project specific needs.
Note: Currently, SSC UI Composer is dispatched with an extension project containing sample control, for example, a weather button used for creating new custom controls.
14PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
UI Composer Screen Flows
KB store list Version support Searching/Filtering New/Copy/Add
New/Copy/Add Select KB Select store template Select pre-defined page Header information
Drag and drop KB dataelements
Drag and drop UI control elements
Specify properties and appearance for controls
View UI layouts on desktop/mobile/iPad
Test UI and KB
15PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
Composed UI Integration into Product Selection Portal
Product Selection
Portal(Example: SAP
Commerce / Custom UI)
Select Product
Configure Button
SSC Configuration
ScreenReturn to specified URL upon completion
Select Product
iFrame(Return URL=N)
Return URL = Y
SSC Configuration
Screen
The composed UI screens can be provided in the following two modes:
In the first mode, the configuration opens in a new tab, and on clicking the buttons Save or Discard navigates to the quotation screen.
In the second mode, the configuration is embedded in an iFrame and opens within the same screen.
17PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
The next slides will show the screens for the highlighted action branch above.
Workspace
Add new store Copy store Add store Edit selected store
Select KB, store templates, pages, and
header info
Compose store, select characteristic/classes, UI
controls, and preview
Save/Commit/Delete
Select store, new KB, and header info
Add/modify store, select characteristic/classes,
UI controls, and preview
Select store
Store reference added to model
Add/modify store, select
characteristic/classes, UI controls, and
preview
UI Designer Action Tree
Save/Commit/Delete Save/Commit/Delete
18PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
UI Composer Workspace
The concept of workspace enables a UI designer to work independently since other UI designers do not share their individual workspace.
Users with designer, developer, and administrator roles can utilize it to organize their work. Each user can have one or more workspaces.
Workspace is a container which references one or more stores. A store can exist in one or more workspaces.
It maintains versions of store definitions and locks the store currently being worked upon.
It tracks store versions along with their status.
19PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
The edit/delete/add icons are used to manage workspace
The plus (+) button shows a menu with three options: Create, Copy from, and Add Reference to workspace
The Remove Reference button is used to delete store definition references
This screen displays the store definitions
This opens the Manage Storesview to unlock/delete a store definition
Displays error message specific to store definition
Using the Search field, user can filter between store definitions
20PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
The next slides will show the screens for the highlighted action branch above.
Workspace
Add new store Copy store Add store Edit selected store
Select KB, store template, pages, and
header info
Compose store, select characteristic/classes, UI
controls, and preview
Save/Commit/Delete
Select store, new KB, and header info
Add/modify store, select characteristic/classes,
UI controls, and preview
Select store
Store reference added to model
Add/modify store, select
characteristic/class, UI controls, and
preview
UI Designer Action Tree
Save/Commit/Delete Save/Commit/Delete
21PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
As user types, this field dynamically filters out list rows based on matching text (substring) in any column
All these steps are clickable buttons which can be used to directly navigate to other windows
On clicking the Cancel button, the user is returned to workspace
Create New Store
This screen is used to search and select knowledge bases
22PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
Create New Store
On selecting the Store Template option, UI designers have a choice to select between Unified Brand or Custom Unified Brand store templates
23PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
Create New Store
On clicking the Pages button, UI designers have an option to select between predefined pages to use within the store
On clicking the Search field, UI designers can filter between predefined pages
24PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
Create New Store
On clicking the Header Info button, UI designers have to specify values for fields: Store Name, Store Description and Tags
The Selected data header displays values entered by the user on previous screens in fields: Knowledge Bases, Store Template and Selected Pages
25PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
The next slides will show the screens for the highlighted action branch above.
Workspace
Add new store Copy store Add store Edit selected store
Select KB, store template, pages, and
header info
Compose store, select characteristic/classes, UI
controls, and preview
Save/Commit/Delete
Select store, new KB, and header info
Add to/modify store, select
characteristic/classes , UI controls, and preview
Select store
Store reference added to model
Add to/modify store, select
characteristic/class, UI controls, and
preview
UI Designer Action Tree
Save/Commit/Delete Save/Commit/Delete
26PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
The Copy Store screen allows users to copy stores to workspace
Step 1: On clicking the Store Definition button, user can perform the following actions: Using the Name field, UI designers can select a store from all existing available stores Using the Search field, users can dynamically filter and search from available stores
27PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
The Copy Store screen allows users to copy stores to workspace
Step 2: On clicking the Knowledge Base button, user can perform the following actions: Using the Knowledge Base field, UI designers can select required knowledge base from available KBs Using the Search field, user can dynamically filter and search for available KBs
28PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
The Copy Store screen allows users to copy stores to workspace
Step 3: On clicking the Header Info button, user needs to perform the following actions: The UI designer needs to specify input values for fields: Store Name, Store Description
and Tags A warning message highlights the difference between the original knowledge base
(associated with the copied store) and the selected knowledge base The UI composer will remove any UI controls from store pages not associated with the
knowledge base
29PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
The next slides will show the screens for the highlighted action branch above.
Workspace
Add new store Copy store Add store Edit selected store
Select KB, store templates, pages, and
header info
Compose store, select characteristic/classes, UI
controls, and preview
Save/Commit/Delete
Select store, new KB, and header info
Add to/modify store, select
characteristic/classes, UI controls, and preview
Select store
Store reference added to model
Add to/modify store, select
characteristic/class, UI controls, and
preview
UI Designer Action Tree
Save/Commit/Delete Save/Commit/Delete
30PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
On clicking the Add Reference button, the user can add an existing store to their workspace from the main workspace page
On this screen, the user selects the Workspace to which they wish to add a store reference
31PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
Using the search field, the user can dynamically filter and search from available store definitions The user can search a store either by Name or Knowledge Base fields
32PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
The next slides will show the screens for the highlighted action branch above.
Workspace
Add new store Copy store Add store Edit selected store
Select KB, store template, pages, and
header info
Compose store, select characteristic/classes, UI
controls, and preview
Save/Commit/Delete
Select store, new KB, and header info
Add to/modify store, select
characteristic/classes, UI controls, and preview
Select store
Store reference added to model
Add to/modify store, select
characteristic/class, UI controls, and
preview
UI Designer Action Tree
Save/Commit/Delete Save/Commit/Delete
33PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
The Knowledge Base Elements sidebar displays the KB material in hierarchical organization
The General button displays controls that are always available
The Custom button shows controls that can be added to the control list
The Knowledge Base button displayscontrols that needs to bound to KB
The plus (+) button adds a new pre-defined page
On clicking the Previewbutton, an interactive preview is shown in a new window/ tab
Canvas area
The Office Characteristics values display the characteristics of the selected material
Control Properties
34PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
Header Info: This option displays the store details (Name, KB, Created date, Status and Version).History: This option displays the version information of a store definition. It also allows users to rollback to previous unchanged version of store
36PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
In another tab/window, store will be rendered in an interactive and published look & feel (styles, colors and sizes). Configuration is created in SSC and user can interact with the configurator
User has an option to select different languages
On clicking the Tablet button, store is rendered in Tablet
Here, the Configuration Status is displayed
38PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
UI Admin Action Tree
Workspace
Add new store Copy store Add store Edit selected store
Select KB, store template, pages, and
header info
Compose store, select characteristic/classes, UI
controls, and preview
Save/Commit/Delete
Select store, new KB, and header info
Add to/modify store, select
characteristic/classes, UI controls, and preview
Select store
Store reference added to model
Add to/modify store, select
characteristic/class, UI controls, and
preview
Save/Commit/Delete
Manage stores
View (regular/master stores), unlock, and
delete all stores
The next slides will show the screens for the highlighted action branch above.
39PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
On clicking the Unlock or Delete button, users with admin authorization can unlock or delete a store
The Manage Store Definitions screendisplays all the store definitions
40PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
UI Admin Action Tree
Workspace
Add new store Copy store Add store Edit selected store
Select KB, store template, pages, and
header info
Compose store
Save/Commit/Delete
Select store, new KB, and header info
Add to/modify store, select
characteristic/class, UI controls, and
preview
Select store
Store reference added to model
Add to/modify store, select
characteristic/class, UI controls, and
preview
Save/Commit/Delete
Manage Stores
View stores (regular/master),
unlock, and delete
Choose master Choose regular
Compose store
Save/Commit/Delete The next slides will show the screens for the highlighted action branch above.
41PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
The Type field has options to choose between “Master” or “Regular” stores. On clicking the Done button, user cannot change store type.Note: Only admin users can create store of Type “Master”
Create New Store On clicking the Header Info
button, UI admins have to specify values for fields: Store Name, Store Description and Tags.
The Selected data header displays values entered by the user on previous screens in fields: Knowledge Bases, Store Template and Selected Pages.
Master stores are used to create and maintain pre-defined pages which can be used in other stores for consistency
42PUBLIC© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ
Only users with admin authorization can publish and delete the stores by clicking on Publishor Delete buttons