SSC UI Composer Overview - help.sap.com

PUBLIC

Solution Sales ConfigurationUI Composer Overview

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

About UI Composer


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.


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

UI Composer Workflow


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


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

UI Composer Architecture


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


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


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


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.


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


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.

UI Composer Designer


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


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.


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



Workspace


Select KB, store template, pages, and

header info



Save/Commit/Delete


Add/modify store, select characteristic/classes,

UI controls, and preview

Select store


Add/modify store, select

characteristic/class, UI controls, and

preview




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


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


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


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



Workspace



header info



Save/Commit/Delete


Add to/modify store, select

characteristic/classes , UI controls, and preview

Select store




preview




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



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



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



Workspace


Select KB, store templates, pages, and

header info



Save/Commit/Delete



characteristic/classes, UI controls, and preview

Select store




preview




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


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



Workspace



header info



Save/Commit/Delete




Select store




preview




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


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

UI Composer Interactive Preview


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

UI Composer Administrator


UI Admin Action Tree

Workspace



header info



Save/Commit/Delete




Select store




preview

Save/Commit/Delete

Manage stores

View (regular/master stores), unlock, and

delete all stores



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


UI Admin Action Tree

Workspace



header info

Compose store

Save/Commit/Delete




preview

Select store




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.


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


Only users with admin authorization can publish and delete the stores by clicking on Publishor Delete buttons

Thank you.Contact information:

Vivek Kumar GuptaProgram Lead : SSC and [email protected]

Documents

SSC UI Composer Overview - help.sap.com