Electos Application Integration

Electos Application Integration

Part IIReal World Examples

Agenda• Techniques• Examples

Wednesday,June 2, 2010 Vincent Oorsprong - Electos Application Integration 2

Techniques• Integration means mixing two applications• Two major techniques:– iFrame– Webservice based


ASP application• Classic WebApp ASP based application

requires the use of an iFrame in the design– Two ways:• Electos template with a fixed URL to the ASP page• Electos template that uses the value of a document

structure item as the URL to the ASP page


iFrame• Easy to use, implement• Looks can be poor– Scrollbars– Inside window– Design (colors, font etc)


iFrame fixed – How to create• In Design copy an existing (e.g. normal.asp) to

a new name (e.g. orderentryfixed.asp)– Add to the design code like:

• <iframe src="http://localhost/order_entry_15_1" width="99%" height="500px" />

• In Control Panel | ASP Templates register the new ASP template

• Create a new page using the template


iFrame – variable – How to create• In Design copy an existing (e.g. normal.asp) to

a new name (e.g. orderentrydynamic.asp) • In Control Panel | ASP Templates register the

new ASP template• In Control Panel | Document Structure Items

create a new document structure item


iFrame – variable – How to create• Add items of your choice like:– Title: For page title– iFrameSrc: URL used for the iFrame Src attribute– iWidth: For the width of the iFrame– iHeight: For the height of the iFrame– Text: Optional if you want to accompany iFrame

with website text• Remember, you can always add items laterWednesday,June 2, 2010 Vincent Oorsprong - Electos Application

Integration 8

iFrame – variable – How to create• Create a new page– Use the new document structure item– If not selected, select the ASP file to be used– Enter the title, text, iFrame values

• Test!


iFrame - Design• Ideal would be if the application uses the

same design as the Electos web application• Create a CSS and pass the name of the CSS

with the iFrame Src link as URL parameter• Read the CSS information in the web

application and let a designer style the embedded application based on the CSS


iFrame – EDUC 2010• Let’s take a look at EDUC 2010 website• Site: www.educ2010.com• Studio: www.educ2010.com


http://www.educ2010.com/

http://localhost/dae_educ2010Studio

Webservices• Include javascript files from Electos pages• Javascript uses AJAX VdfCall technique to call

webservice functions in 2nd application• Limitation: embedded application needs to be

in the same domain


Webservices – How to• Create a document structure item– Name and location of the Javascript file• Can be in AppHTML or a subdirectory of this• Can be in AppHTML (subdirectoy) of embedded

application

– Function name to start


Webservices• Let’s take a look at the football pool website


Electos Integration• The code and websites shown last week and

today are made by Data Access Europe employees. If you are interested in an Electos web application with a connection to a different web application you can contact Data Access consultants via [email protected]


Electos Application Integration

Documents

embedded application

electos pagesjavascript

electos web applicationcreate

new asp templatecreate

new document structure

new pageuse

asp pagewednesday

asp file