ui framework

Overview Presentation

New UI Framework Capabilities

SAP Enhancement Package 1 for SAP CRM 7.0

© SAP 2009 /

Objectives

At the end of this unit, you will be able to:

Understand and know how to use the new CRM UI Framework Features for

SAP EHP1 for SAP CRM 7.0:

Dashboards

Object Tagging and Favorites

Go-to Menu and Action Menu

Paste in Tables

Logo Exchange

Rapid Applications

Mash-ups

© SAP 2008 /

1.Introduction

2.Search Enhancements

3.UI Highlights

4.UI Configuration

5.Extensibility

6.New Capabilities for Implementation Projects

Agenda

Web Client User Interface – SAP EHP1 for SAP CRM 7.0

Key Features

State-of-the-art, modern user interface leveraging Web 2.0 paradigms

Simple information and navigation architecture to facilitate finding, reviewing and editing of

information

Broad personalization capabilities across all software areas to let the user decide how he

works best

Simple but flexible UI configuration capabilities to pre-define the user interface for user

groups

The Web Client User Interface is the first step into a new era of SAP CRM user interfaces

regarding usability and flexibility for the business user.

Web Client User Interface – SAP EHP1 for SAP CRM 7.0

Key Benefits

High user adoption rate as immediately you

will feel familiar with the User Interface

CRM 2.0 – Web 2.0 themes integrated to

facilitate ease of use

Easy and flexible personalization and

configuration to adapt to what your users really

need

Extensible to meet customer needs

Rich functionality through all areas of CRM

Simple

Flexible

Powerful

© SAP 2008 /

1.Introduction


3.UI Highlights

4.UI Configuration

5.Extensibility

6.New Capabilities for Implementation Projects

Agenda

Search Enhancements

Key Features

Free-Text Search

Fuzzy Search

Wildcard Search

Search Multiple Attributes

as modeled per Business

Object

Cross-Object Search

Authorization Checks

executed on search

engine

Search Features

Search centrally available

on all screens

Direct filter for a single

object type

Grouped, cross-object

search result page

Personalization of result

view per object type

Personalization of search

result page

User Interface

Overview of template

attributes in CRM Enterprise

Search Workbench *

Automated resolution of 1:1

relations (double speed, half

memory consumption) *

94 most required CRM

objects are delivered out of

the box *

Custom objects can be

created and modeled

Modeling

* New in SAP EHP1 for SAP CRM 7.0

Search Enhancements

Simple Search

Free-text search across business objects

available on all screens

Common search UI across all business

roles and CRM applications

Enable search for own objects

Adapt search models to your needs

Integration with Enterprise Search

technology of SAP NetWeaver

Simplicity

Flexibility

Speed

Search Enhancements

Enabling Enterprise Search

Model Overview displays a summary list of

marked attributes *

Search Templates for 94 most-required

CRM Business Objects are delivered out-

of-the-box *

CRM Enterprise Search Modeling

Workbench is based on CRM Business

Object Layer (BOL)

Attributes of Business Objects are marked

as search criteria and/or search results in

Search Templates

Model your objects for search

according to your needs.


© SAP 2009 /

Search Enhancements

Search Page - Capabilities and UI Elements

Search

result list

area

Search

criteria

area

Choose

search

criteria

Select search

operator

Enter search value incl.

Multi-ValueSearch*Hide search

criteria area

Add or remove

search criteria

Save current

search model

Define maximum

number of results

Export result

list to XLS*

Result list

toolbarPersonalize

result list

Hyperlink to detailed

information

Sort/Filter via

click on column

header

Page through

result list

Show Table

Graphically

Result list

short info


Search Enhancements

Paste Multiple Search Values

© SAP 2009 /

This feature enables the user to paste multiple values from applications such as MS Excel into an editable field in the advanced search

As a result of such paste operation, each pasted value is represented by a separate line in the Advanced Search view

To facilitate handling of a large number of lines we introduced the concept of grouped rows: If successive rows have the same attribute (e.g. "Product ID") and the same operator (e.g. "is"), the user can collapse such a group by clicking on the visual indicator for collapsing

Ability to paste multiple values

into the advanced search in a

familiar and efficient wayPaste


© SAP 2008 /

1.Introduction


3.UI Highlights

Dashboards


Go-To Menu & Action Menu

Paste in Tables

Central Sharing Tool

Tray/Icon Personalization

Enhanced Table Features

Tab Chain Definition

Tile Layout Personalization

Other Personalization Options

Task Based UI

Alternative Progress Indicator Type

Agenda

4.UI Configuration

5. Extensibility

6. New Capabilities for

Implementation Projects

Dashboards

© SAP 2009 /

A user can embed one (or many) dashboard(s) on his homepage simply via personalization.

To do so the user can choose from the repository of all reports (of his role) or from the favorite reports.

The chosen dashboards will appear as content block on the home page

Enrich your Home page with

Analytical Insight

Choose from All or

Favorite Reports

Content Block with

Dashboard on HOME

New in SAP EHP1 for SAP CRM 7.0


© SAP 2009 /

Mark an object instance as your favorite with one click

One-Click access to favorites on HOME page

Manage your favorites as you know it from your Web browser (own folders and sub folders)

Optionally share favorites with the community

Favorites

Possibility to maintain user-specific tags to every object instance

Explore tag cloud on home page –use it for quick access to information

My cloud, community cloud, popular

tags, my recent tags, sorting ,

personalization, and search capabilities

Switch on/off tagging functionality via personal settings

Tagging



© SAP 2009 /

Quick overview of what content is

available on OVP

Quick navigation to any assignment

block wherever you are on the

overview page

Sequence in drop down menu

follows the real OVP structure

Available optionally

Go-To Menu

The Actions menu is an icon that is strategically assigned to a field and can be used as both a status/ presence indicator as well as a menu when clicked, in which actions related to the field can be triggered

Action Menu feature supports the form views and tables

Action Menu


© SAP 2009 /

Paste in Tables

Ability to paste text in single or multiple cells from e.g. Microsoft Excel to existing tables

in the Web Client User Interface.

No need to re-type content that is already available

Supports read-only/non-editable fields in which if a paste is performed over these fields, the pasted data will be discarded and the original data remains unchanged

This process supports the following: Checkboxes, Drop-Down List Boxes and All Text

Source - Copy

Cursor - Paste


Central Sharing Tool (CST)

© SAP 2009 /

Ability to share Tags, Favorites,

Saved Searches, and Favorite

Reports

Ability to share across business

roles, user, organizations, and

positions

Personalizable „My Sharebox‟ on

HOME page - to get a quick

overview

Central Sharing Tool (separate

page) - allowing easy selection of

items to share as well as

colleagues to share with, incl.

notes field

The Central Sharing Tool

introduces the notion of a Super

Sharer, Sharer, and Recipient -

differentiating capabilities a user

has using the CST

Share information with your

colleagues

Central Sharing Tool Application

My Sharebox

on HOME page


© SAP 2009 / Page 19


The Home Page

The HOME page is the starting point for every user in the daily business. It contains the

most important personal information and access to the most frequently used tools.

Predefined content for

Appointments, tasks, reports

Alerts and workflow tasks

Application-, Web-Links, Widgets

Tag Cloud* ( see slides later for

details)

Favorites* (see slides later for

details)

Direct content personalization*

Graphical pictograms possible as

content identifier

(incl. personalization*)



Personalization Options

© SAP 2009 / Page 20

Personalize* pictograms per

assignment block

Available for skins using

pictograms as content identifiers

Admin makes pictograms

available for personalization

Valid for Home, Work Center

pages, and Reports page

Make the software work the

way you do

Drag & Drop

Pictogram

Personalization*


Enhanced Table Features

© SAP 2009 / Page 21

Use SHIFT and CTRL to

easier select several rows or

ranges of rows

Performance improved vertical

scrolling (optional)

Capability to fix columns (left

or right) in horizontally

scrollable tables

Keyboard handling table: The

arrow keys can now be used

to navigate to contents within

a table.

Click on inactive(non-editable)

cell in an editable table

triggers selection of the row

If rows are selected in a table

and then the table rows are

filtered, the selection of rows

is removed.

Increased flexibility and

productivity Using SHIFT

Using CTRL New Scrolling

Fix Columns


Tab Chain Definition

Tab Chain Personalization in Form Assignment Blocks

© SAP 2009 / Page 22

Allow your users to increase

productivity while maintaining

information

A user can define for any form-

based assignment block where to

start the data maintenance and in

which sequence <tab> should

navigate through the editable

fields

Tab sequence definition is

switched on via right aligned icon

in the assignment block title bar

Define your personal tab

sequence


© SAP 2009 / Page 23

Tile layout Personalization

As an alternative to the single column layout - which is mostly the default layout for SAP

CRM roles - a single object can also be visualized in a tile layout.

Personalize* tile layout (drag & drop as well as separate personalization dialogue)

The visual design* of tile layout has been aligned with single column layout, incl. an automatic overflow mechanism* in case of insufficient space



Create Multiple Table Views (Layouts)

© SAP 2009 / Page 24

The user can define multiple personalization views for a table and save them under specific view names

All personalization settings are stored within a view

Direct changes via drag & drop update the current view

The personalized views are available to the user via an automatically added DDLB in the table (or AB) toolbar

Via the personalization popup you can create multiple views as well as delete or rename a view

Personalization and Usage of

Table Views (Layouts)



Personalization for Drop Down list Box

© SAP 2009 / Page 25

A DDLB can show the key as well as the value, incl. sorting based on one of them

Via central personalization (SETTINGS area) the following features can be set:

Show keys in dropdown list

Sort dropdown list either by

default sorting order (set by the

application), by value or by key

You can type the first letters of the item or key in the field of the dropdown list, and the relevant item is selected

Personal Settings for

Dropdown Lists

Central

Personalization

Sorted by KeySorted by Value

Sorted by Default


© SAP 2009 / Page 26

Task Based UI

A Guidance For Your Users

Visualization of substeps and animated scrolling for structuring complex tasks*

As we can see in the screenshot ,substeps of Step 3 can be visualized.

Simplify a complex task by dividing it into easy sub steps

A roadmap provides a visual representation of the whole activity to the user

Use buttons or the roadmap control for easy navigation

Add explanatory texts for each step if required

Freely define the sequence and content of the steps

Reuse existing views or even tasks via simple embedding


© SAP 2008 / Page 27

Task Based UI

UI Configuration

© SAP 2007 / Page 27

*

Additionally in the UI configuration tool the

following options are possible:

Views can be reused.

Tasks can be reused via embedding.


Alternative Progress Indicator Type

Decide how visible the progress indicator should be

© SAP 2009 / Page 28

The DEFAULT progress indicator type provides

a very prominent feedback to the user that the

system is currently processing a request

The GRADIENT BAR progress indicator

provides a more discreet option to let the user

notice that the system is currently processing a

request

The GRADIENT BAR provides a white bar at

the top of the screen which shows a blue mark

„flowing‟ across it from left to right

Choose your progress indicator

DEFAULT

Wait Notice

NEW

Gradient Bar


© SAP 2008 / Page 29

1.Introduction

2.Searches

3.UI Highlights

4.UI Configuration

Tile Layout Configuration

Work Center/Home Page

Logo Exchange

UI Check Tools

5. Extensibility

6. New Capabilities for Implementation Projects

Agenda

UI Configuration

Key Features

To adjust the CRM user

interface to your corporate

identity and to your

business needs a bundle of

integrated tools is provided

Efficient and Holistic

UI Configuration

UI Configuration Tool

Business Role and

Navigation Bar Customizing

Design Layer Customizing

Application Enhancement

Tool (AET)

Rapid Applications and

Mash-ups*

Component Workbench

Tools

Create Mash-ups mapped to the

fields on a view*

Create new applications based on

DB Tables or Web services*

Add new fields

Position fields on views

Rename field labels

Use personalization

Define captions

Define Navigation Bar entries

Easy Logo Exchange*

Examples in UI

Configuration


UI Configuration

Key Benefits

Easy configuration even for power users

Simple task achievable without training

Really fine tune the user interface to your

users needs

Less time needed to rebuild screens, add

or remove content

Simplicity

Flexibility

Speed

© SAP 2007 / Page 32

UI Configuration

Tile Layout Configuration

The Tile Layout is visualized by

a table for each tile *

Use drag and drop to move

assignment blocks from the

repository to the tables and

between the tables *

Configuration Capabilities


© SAP 2007 / Page 33

UI Configuration

Work Center / Home Page

Define Pictograms* as Visual

Identifier for content blocks

Add blocks from assignment

set

Remove blocks from

displayed assignments

Configuration Capabilities


UI Configuration

Logo Exchange

© SAP 2007 / Page 34

Capability to exchange the logo

(browser-specific, skin-specific or

across skins) without needing to

create an own skin

No need to modify CSS files for this

simple task

Upload YOUR logos and embed

them using standard customizing

approach

The logo area has been enhanced

with a freely definable text

accompanying the logo

Flexibly define the logo text role-

specific either in IMG or in the web

client based Role Configuration

Supported Features

© SAP 2008 / Page 34

Logo Area Logo-Text Area

Logo-Text Customizing

Logo Customizing


UI Configuration

Check Tools

Fine-granular or high-level

definition of what to check

Check results are persisted

as application log

Check results can be

displayed grouped or as

list

Navigation from check

result to location of issue

Check tool can be run

scheduled in batch-mode

General Functions

Consistency of views

enhanced by customers

Consistency of design layer

definitions

Consistency of UI

configurations

Consistency of

personalization data

Automatic adjustments of

personalization data

Consistency of runtime

repositories

Safeguards

Direct access to checks and

runtime repository

comparison within UI

component workbench

Transfer issue-location

parameters with navigation

Execution checks and

runtime repository

comparison via IMG after

upgrades and/or corrections

Export of check results to

Excel

Integration


Check Tools

Key Benefits

Enhance Applications in CRM Component

Workbench

Apply SAP Corrections, Support

Packages, and Upgrades

Analyze & Reestablish Consistency with

UI Framework Check Tools

Increase Productivity by Detecting &

Resolving actual Issues, as well as,

potential Issues in your Custom Solution

Gain Stability from Technical Consistency

Flexibility

Safeguarding

Stability

Check Tools

Access via IMG or Component Workbench

© SAP 2007 / Page 37

**

*


Check Tools

Check Result Grouped by Type, Component, View

© SAP 2007 / Page 38 New in SAP EHP1 for SAP CRM 7.0

© SAP 2008 / Page 39

1.Introduction

2.Searches

3.UI Highlights

4.UI Configuration

5. Extensibility

Rapid Applications

Mash-ups

Application Enhancement Tool


Agenda

Extensibility

Key Features

The Application Enhancement Tool (AET) facilitates the creation of custom fields and views*

The Rapid Applications* enable customers to integrate existing data from databases or web

services into CRM applications

The mash-up tool* allows customers and partner to easily define new content that combines

data and services from internal and external sources.

The extensibility toolset is seamlessly integrated in the UI configuration tool and available in

the web client

Creating new content (fields and views*) can performed without deep technical knowledge

The newly created enhancements can be re-used across all existing applications

NOTE: Custom views* created via AET will be referred to as custom tables.

SAP CRM extensibility allows customers and partners to add

new fields and views* to existing application with virtually no technical steps


Extensibility

Key Benefits

Define custom fields and views* that suite

your exact business needs

Innovate by integrating and building on

top of data and functionalities outside of

SAP CRM*

Applications can be extended quickly and

without any coding

Simple and user friendly set of tools that

is seamlessly integrated with the

framework‟s toolset

Flexibility

Simplicity

Innovation


Rapid Applications

Screenshot: Create an Application From a DB Table

© SAP 2007 / Page 42

Create Rapid Applications from

DB Tables

Create Rapid Applications from

Web Services

Embed Rapid Applications into

existing Applications

Define mapping between Rapid

Applications and exiting

applications

Define default values for use in

Rapid Applications (e.g. to pass

licence keys to a web service)

Display embedded Rapid

Application as a form or table

based assignment block

Supported Features


Rapid Applications

Screenshots: Creation of a Rapid Application from a DB Table


Mash-ups

Screenshot: Mash-up Definition

© SAP 2007 / Page 44

Create a widget based on a URL or

HTML/JS script

Incorporate application and system

data (label or value) into the widget‟s

script

Test the mash-up definition before

saving it

Modify the mash-up after creation

Delete mash-ups

Add the mash-up view to the overview

page (as any other assignment block)

Configure the mash-up view via the

standard configuration tools

Supported Methods


Mash-ups

Screenshot: A Google Based Mash-up in Accounts



New Fields and Tables*

© SAP 2007 / Page 46

Create new fields and tables* that

complement existing applications and

best match your specific business needs

Define calculation expressions as part of

the field definition*

Migrate existing fields from EEWB to the

new toolset (AET)*

Extend the supported external interfaces

- for example Mobile, R/3, BW and

OLTP Reporting

Easily reuse custom fields and tables* in

applications that share common

extension places

Generate a form or table view based on

the table‟s cardinality with respect to the

extended object (1:1 or 1:N)*

Supported Features


© SAP 2008 / Page 48

1.Introduction

2.Searches

3.UI Highlights

4.UI Configuration

5.Extensibility


Time Slider

Overview Page

Table Handling capabilities

Message Handling capabilities

Search Help Saved Searches

Context Menu

Agenda

Disclaimer

The following slides describe new features and capabilities available with

the WebClient UI Framework with SAP EhP1 for SAP CRM 7.0.

A broad adoption of this features by applications based on this framework

is not yet available, but they will provide great additional flexibility for

most projects.

So please regard the following slides as additional capabilities available

for customer projects – to be used and implemented based on

customers needs – on project basis only.

Time Slider

© SAP 2009 / Page 50

You use the Time Slider tag to create a date visualization which allows users to select a range of dates via a slider

One-click buttons available for selection of predefined time frames

Time frame selection used to filter display of dependent information

Time bar offers drill down functionality for year, month, and day

Capability to show incidents directly in time bar

Currently used in Utilities industry to narrow down displayed billing or meter reading documents and their details

New tag allowing a time frame

selection

Utilities Example

Drag mouse to

select time frame

Show Incidents

directly in slider


© SAP 2009 / Page 51

Capability to provide a central EDIT button in the work area toolbar of an overview page

Executing this button will switch all assignment blocks into edit mode (valid of course only for those assignment blocks that can be edited in place on the OVP)

The project-based realization depends on the specific application regarding if and which additional coding is needed for a particular use case

Focus on Power Users

Overview Page

Make whole OVP editable via central EDIT button

All assignment

blocks switched

to edit mode


Table Handling Capabilities

© SAP 2009 / Page 52

Fast Row Creation: New rows can be added to a table without processing a roundtrip, increasing work productivity

Rows are added via AJAX request

Fast Row Creation allows you to:

Append 1 to N rows via click on a specific toolbar button

Create up to N rows automatically when performing a paste operation from a spreadsheet

Add a line automatically when hitting the tab key when being in the last editable element of a table

Frontend selection of rows

(Multi-)selection in tables/trees can be triggered without processing a roundtrip on each selection.

Increased productivity and efficiency

Cannot be used in Master Detail scenarios in the master table

Summation of Rows – Calculations in tables incl. Personalization

Following Features can be made available on a project basis


Message Handling Capabilities

© SAP 2009 / Page 53

Possibility to enrich message with a link navigating to message-causing field (on the current page, not across pages)

Possibility to highlight erroneous fields red (errors) or yellow (warnings) to further facilitate identification by user

Navigation from message to corresponding field already available for fields set to mandatory in UI configuration tool

New Capabilities to Facilitate

Message Handling


Search Help Saved Searches

© SAP 2009 / Page 54

The concept of saved searches can be made available in search helps

This includes the capability to save searches as well as making use of saved searches

Corresponding controls are made available in the search help dialogue window

Saved Searches in Search Help


Context Menu

© SAP 2009 / Page 55

The necessary framework for a

context menu incl. new tag is

available

When implemented the Context

Menu will appear on right mouse

click event e.g. on a field, a label,

a picture etc.

This context menu will suppress

the browser-based context menu

options

The context menu is specific to

the cursor position where the right

mouse click is performed

The Framework places the “Show

Field Info – F2” automatically in

the context menu

Necessary framework for

providing a context menu

Context Menu on Label

Context Menu on Field

Context Menu on Page


© SAP 2009 / Page 56

Lesson Summary

This unit covered

An Overview of the new CRM UI Framework Features

for SAP EHP1 for SAP CRM 7.0

You should now be able to understand and use the new features like

Dashboards



Paste in Tables

Logo Exchange

Rapid Applications

Mash-ups

Further information – SAP CRM

WebClient UI Framework – Wiki

https://wiki.wdf.sap.corp/display/WEBCUIF/Home+

Web+Client+UI+Framework

SAP CRM - Ramp-Up Knowledge Transfer (RKT)

http://service.sap.com/rkt-crm

SAP CRM – Demo Portal

http://crmportal.wdf.sap.corp:1080

SAP CRM – Wiki

https://wiki.wdf.sap.corp/display/SAPCRMHub/Ho

me

SAP CRM - Help Portal

http://help.sap.com/crm

SAP Public Web

http://www.sap.com/crm

https://wiki.wdf.sap.corp/display/WEBCUIF/Home+Web+Client+UI+Framework

https://wiki.wdf.sap.corp/display/WEBCUIF/Home+Web+Client+UI+Framework




http://crmportal.wdf.sap.corp:1080/

https://wiki.wdf.sap.corp/display/SAPCRMHub/Home

https://wiki.wdf.sap.corp/display/SAPCRMHub/Home

http://help.sap.com/crm

http://www.sap.com/crm


THANK YOU

FOR YOUR

ATTENTION !

ui framework

Documents

central sharing

show incidents

runtime repository

central edit

paste multiple

single column

ui configuration

dashboards