Electos Application Integration

1. ElectosApplication Integration Part II Real World Examples

2. Agenda • Techniques • Examples Vincent Oorsprong - Electos Application Integration

3. Techniques • Integration means mixing two applications • Two major techniques: • iFrame • Webservice based Vincent Oorsprong - Electos Application Integration

4. 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 Vincent Oorsprong - Electos Application Integration

5. iFrame • Easy to use, implement • Looks can be poor • Scrollbars • Inside window • Design (colors, font etc) Vincent Oorsprong - Electos Application Integration

6. 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: • <iframesrc="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 Vincent Oorsprong - Electos Application Integration

7. 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 Vincent Oorsprong - Electos Application Integration

8. iFrame – variable – How to create • Add items of your choice like: • Title: For page title • iFrameSrc: URL used for the iFrameSrc 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 later Vincent Oorsprong - Electos Application Integration

9. 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! Vincent Oorsprong - Electos Application Integration

10. 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 iFrameSrc link as URL parameter • Read the CSS information in the web application and let a designer style the embedded application based on the CSS Vincent Oorsprong - Electos Application Integration

11. iFrame – EDUC 2010 • Let’s take a look at EDUC 2010 website • Site: www.educ2010.com • Studio: www.educ2010.com Vincent Oorsprong - Electos Application Integration

12. 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 Vincent Oorsprong - Electos Application Integration

13. 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 Vincent Oorsprong - Electos Application Integration

14. Webservices • Let’s take a look at the football pool website Vincent Oorsprong - Electos Application Integration

15. 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 info@dataaccess.eu Vincent Oorsprong - Electos Application Integration