Webinar Series Part III: Powerful

GuiXT Liquid UI for SAP ERP Advanced

Capabilities
Zac Lee – Product Manager, Synactive Inc.
DeeDee Kato – Director of Marketing,
Synactive Inc.

© 2012 Synactive, Inc. GuiXT.com

Recap Part I: What is GuiXT? How To Get
Started

• What is GuiXT?
• Designer Demo
- Create Launch Pad for VA01,
IW21, MM01
- Using Designer on VA01
• Workbench Demo
- Record IW21 to create SAP GUI
screen
- Record MM01 to create Excel
spreadsheet

© 2013 Synactive, Inc.

Recap Part II: Leverage Your ABAPers to Build
iOS applications for SAP ERP

Target Audience: IT Professionals, Web

Developers, ABAPers
• Architecture
• Combining Multiple screens
• Error handling
• Making RFC calls
• Adding screen elements
• Combining multiple transactions
• Conditional display of screens
• Deployment
Agenda for Part III:

Liquid UI Extensions

• Liquid UI Overview
• Web Services
• ODBC
• WS Office
• Questions
 Which one do you need?

• Deep development
• Silo’d technology stacks
for different interfaces
• Edit-Compile-Debug to
slow you down
Sy
Microsoft L5 Unw base Br
• Browser-based
SA M
HT Pla ir
ITS ows
P
Int Ad Duet tfo ed
er ob
Fo activ e Enterprise rm Mo er/
rm e AP Personas i bil
s et/S io r e
F
l
Co
n
Te nsole SUP Mobile
Workflow Container O D ata
Ne S
alternatives with latency
Middle

t AP
Agent re

r
eave App ABA
E E ernet Ga Wea
P NetW on
SA plicat i St Ser
P
J2
Sta ck W eb
Fra Dynpr
S AP In t
ctio
ran s a r
n te w ver issues
wa
ry

ay
wor o T
ac ve me
Ap rver k r k Ser ve
Se

SAP

© 2012 Synactive, Inc.

 Which one do you need?

SA Microsoft M Pla ir
Sy
L5 Unw base Br
OR Liquid UI WS Platform
P
Int Ad Duet HT tfo ed ITS ows
er ob
Fo activ e Enterprise rm Mo er/
rm e AP Personas i bil
s et/S io r e
ln
Te nsole F
SUP Mobile ata
Co Workflow Container O D
Ne S
Middle

t AP
Agent re

r
eave App ABA J2E E
W In ternet Ga Wea
etW on ck e S AP n te
N St Ser
P Sta b
Fra Dynpr ctio w ver
P
SA plicat i ran s a r
wa
ry

ay
wor o T
ac ve me
Ap rver k r k Ser ve
Se

SAP

© 2012 Synactive, Inc.

 What is Liquid UI?
Connects directly to SAP through patented connectivity technology

Built on proven GuiXT technology

Extends your SAP across both
desktop and mobile devices

Collapse and aggregate screens, tabs,
and transactions

Start from SAP, Record Once and
Deploy everywhere

No Java, ABAP programming; no 3rd
party application server required

Native connectivity for iOS

Continue SAP usage without network connectivity

Enhanced JavaScript to empower a responsive IT team

Lean, Agile, Non-Disruptive Business Solution

© 2013 Synactive, Inc.
Designer

• WYSIWYG editor using

Drag and Drop
automation
• Generates GuiXT WS
scripts
• Design screen layouts
to be used with Liquid
UI Desktop, Mobile,
iOS, etc.
• Eliminates the need to
know controls names,
select control flow
• Preserves hand written
script changes

© 2013 Synactive, Inc.

Workbench

Record And Deploy To All Touch Points

© 2013 Synactive, Inc.

Extending SAP to Smartphone/Tablets

© 2013 Synactive, Inc.

Extending SAP to Windows Handheld
Barcode/RFID Scanners

© 2013 Synactive, Inc.

Liquid UI for Offline

Challenges:
• No access to SAP for field
workers
• Redundant data entry
• Inaccurate and incomplete data
• No system snapshot resulting in
decreased productivity
Solution:
• Allows users to continue working Windows
with or without network Mobile Barcode
connectivity Laptops
Scanners
• “Native look and feel of SAP!”
• Integrated / scalable database
• Patented Technology
 Liquid UI for Web Browsers
• Web based delivering simplified SAP processes and transactions
• Uses CSS for a fully modernized, customized look (add customer logo)
• Zero footprint delivery of simplified SAP transactions

Browser iPhone
WebUI Integration with Sharepoint

Embed WebUI or PDF as iFrame as an embedded HTML

PDF file is created with workbench
Extending SAP to PDF and Excel Front-ends

© 2013 Synactive, Inc.

Agenda for Part III:

Liquid UI Extensions

• Liquid UI Overview
• Web Services
• ODBC
• WS Office
• Questions
Overview

• One solution deployable to multiple

environments
• Mobile (iPhone, Android, Windows)
• Offline (Deskop and Mobile)
• Web (Desktop and Mobile browsers)
• Desktop (SAPGUI)

• Superset of Javascript (ECMA standard)

Code Sample

Control

Draws an inputfield with label ‘Test’ in the yx coordinate [1,1]

Liquid UI Script Files
inputfield

Screen 1
Layout
Mobile

Screen1.sjs

LiquidUI Desktop
Screen 2
Scripts
Layout
Folder

Screen2.sjs Offline

Screen 3
Layout
Web

Screen3.sjs
Extensions

• Liquid UI includes driver support for

ODBC, WSOFFICE, Web Services

• ODBC (Connect to SQL database)

• WSOffice ( Read/Write to
Microsoft Excel documents)
• Web Services (cURL)

© 2012 Synactive, Inc.

Web Services

Using wsCurl

• The wsCurl library is used with the

load command to transfer data from a
WS script to an external URL

i.e.
• Translating text to another
language
• Getting direction list from maps

© 2012 Synactive, Inc.

Web Services

Client Level

Web Services
HTTP
GOOGLE API

SAP

© 2012 Synactive, Inc.

Web Services

Using wsCurl

First will need to place the .dll file in the Liquid UI

folder and then load it from the script

load('wscurl.dll');

© 2012 Synactive, Inc.

Web Services - Example

Example using wsCurl for translating text

• Initialize the wscurl object

var wsCurl = new Curl();

• Fetch translated data. Use the following fixed string to fetch the
translated data from the Google APIs.

var baseURL =
"https://www.googleapis.com/language/translate/v2?key=AIzaSyChzKkNGfmuBAhZXPD7Pw-
1nl4e0c6shNw&q=";

var completeURL = baseURL + textToConvert + sourceLangIdentifier + sourceLang +

translateLangIdentifier + translateLang;

© 2012 Synactive, Inc.

Web Services - Example

• Make a Translation Request Now using the complete URL,

you can make a request for translation as shown in the below
example:

wsCurl.setopt(Curl.CURLOPT_URL, completeURL);
Note: This example is for requests that return a JSON object in a string.

© 2012 Synactive, Inc.

Web Services

• The final step in the process is to call the execute function.

This will dispatch a response to your request.

var response = wsCurl.exec();

Note: You can check the return value for errors with the error codes that are
explained in the Error Codes section. A return value of 0 means the operation
succeeded.

© 2012 Synactive, Inc.

Web Services

• In this example, the response will be in JSON, although you

can set the response to be in HTML as well. A sample response
based on the example is shown below:

{
"data": {
"translations": [
{
"translatedText": "Bonjour tout le monde“
}
]
}
}

© 2012 Synactive, Inc.

Web Services

• To close the HTTP connection for wsCurl, use the following

code:

wsCurl.close();

• Remove any references for the garbage collection as shown

below:

wsCurl=NULL;

© 2012 Synactive, Inc.

Web Services

< DEMO >

© 2012 Synactive, Inc.

ODBC

Open Database Connectivity

(ODBC) is a widely accepted
application-programming
interface (API) for database
access. It is based on the Call-
Level Interface (CLI)
specifications from X/Open and
ISO/IEC for database APIs and
uses Structured Query Language
(SQL) as its database access
language. *
*Reference:
http://dev.mysql.com/doc/refman/5.5/en/connector-
odbc-general-information.html

© 2012 Synactive, Inc.

ODBC

Using wsODBC

• The wsodbc is a set of libraries that

you can use to make ODBC
connections and perform SQL queries
from within LiquidUI scripts.

i.e.
• Connect to Database outside SAP
• Read/Write to remote DB

© 2012 Synactive, Inc.

ODBC

Using wsODBC

Place the wsodbc.dll file in the Liquid UI folder and

then load it from the script

load('wsodbc.dll');

© 2012 Synactive, Inc.

ODBC

Setup the ODBC connection to the Database

• Create the connection object

var dbase ={server:'localhost',dbname:'sakila',user:'admin',pass:'admin'};

var sConnectUser = 'Driver={MySQL ODBC 5.2 ANSI Driver};

Server={'+dbase.server+'};
Database={'+dbase.dbname+'};
UID={'+dbase.user+'};
PWD={'+dbase.pass+'}';

db = new Odbc(sConnect);

© 2012 Synactive, Inc.

ODBC
DISPLAYING DATA FROM A TABLE
• You can use connection object created above to execute queries in the Database.

e.g
db.select("select * from <tablename> ");

• Writing the conventional SQL select query inside the function select. Our
language extension (iterators) iterates all the records returned by the function.

e.g
for record <- db.select("select * from <tablename> ")
{
for (colname in record)
{
print(name+':'+record[colname]+' ');
}
}
© 2012 Synactive, Inc.
ODBC

EXECUTING INSERT, DROP AND CREATE QUERIES

• Once you have a valid database connection object you can call the exec method to
execute these SQL queries.

e.g.
db.exec('drop table <tablename>');

db.exec(“create table <tablename> ( chardata varchar(50))”);

db.exec(‘insert into <tablename> (chardata) values (?)’, ["Hello"]);

Note: The character data should be enclosed in single or double quotes. For Boolean datatype
you can use either true-false or 1-0.

© 2012 Synactive, Inc.

ODBC

Deleting a Connection
• To delete a previously created database connection, please do the following.

db = NULL;

© 2012 Synactive, Inc.

ODBC

< DEMO >

© 2012 Synactive, Inc.

ODBC – Client Use Case
Offline Data Architecture
After the inbound transactions are done data
will be saved in the centralized database which
can be used to perform outbound transactions

GuiXT Server ODBC MS SQL

SERVER

SAP

© 2012 Synactive, Inc.

WSOffice

Enables SAP users to create custom

scripts that can access the power of
Microsoft Office applications and
Adobe PDF forms

© 2012 Synactive, Inc.

 Workbench

Workbench
Workbench is the development toolkit for the
WSOffice Extension. The Workbench's
functionality includes the following:

• Bulk data transfers from Excel to SAP and

vice-versa
• Bulk data migration from PDF forms to SAP
• Server-side upload script creation for Offline
• Client-side screen painting and
upload/download script creation for Offline
• Ready-made processes for Access

© 2012 Synactive, Inc.

Workbench

• Standard SAP

• Excel Scripts

• PDF Scripts

• Offline Scripts

• Access Scripts

© 2012 Synactive, Inc.

WSOffice

Using wsoffice

First will need to place the .dll file in the Liquid UI

folder and then load it from the script

load('wsoffice.dll');

© 2012 Synactive, Inc.

WSOffice

Using wsoffice

First will need to place the .dll file in the Liquid UI

folder and then load it from the script

load('wsoffice.dll');

© 2012 Synactive, Inc.

WSOffice

Running Excel file

• Use workbench to record and create a Excel script

© 2012 Synactive, Inc.

WSOffice

Running Excel file

• Navigate to the specified transaction

© 2012 Synactive, Inc.

WSOffice

Running Excel file

• Import the Excel file

© 2012 Synactive, Inc.

WSOffice

Running Excel file

• Excel file will open and updates will be made live during read processing

© 2012 Synactive, Inc.

WSOFFICE

< VIDEO DEMO >

© 2012 Synactive, Inc.

 How Can You Get Started?

1) Download trial version of WYSIWYG tool:

http://www.guixt.com/solutions/free_trial.php

2) Download free sample of customized screens of

Plant Maintenance Schedulers and Planners
Console:
http://www.guixt.com/solutions/free_trial.php

3) Download Liquid UI for iOS from the App Store

Mobilize And Enable Your SAP Workforce NOW!

© 2013 Synactive, Inc.

Upcoming Webinars

“Industry” Series:
• Utilities: Aug 21, Simplifying Work Order Business Processes at
Marin Municipal Water District
• Oil and Gas: Sept TBD
• Retail: Oct TBD
• Chemicals: Nov TBD
“Functional Module” Series: Plant Maintenance, Sept 11
• Business Challenges
• PM Before/After Screenshots
• ROI
• Screen design and tools used
• Combine screens, tabs, transactions
• Code Snippets

© 2013 Synactive, Inc.

Thank You!!!

For more information about

Synactive’s GuiXT
Solutions:

www.guixt.com
rfi@guixt.com
Tel: 650.341.3310

© 2013 Synactive, Inc.