Mobile Links Sample

FactoryTalk VantagePoint EMI

Version: January 2013 rev 1

Provided by Rockwell Automation Information Software Commercial Engineering

1 of 11

Contents
Overview ................................................................................................................................................... 3 Version Support ........................................................................................................................................ 3 License and Technical Support.................................................................................................................. 3 Additional Resources ................................................................................................................................ 3 User Guide ................................................................................................................................................ 4 Appendix A Overview of the technology used ....................................................................................... 9 Appendix B .............................................................................................................................................. 10 Appendix C .............................................................................................................................................. 11

Overview
This document provides users with instructions to deploy the Mobile Links sample developed and supported by Information Software Commercial Engineering and serves as a basic set of instructions for the use of the application.

The Mobile Links sample was created to provide an alternative solution for browsing content, within the FactoryTalk VantagePoint model, that could be considered Mobile Device Friendly. This sample provides a web page that uses HTML and Java Script / jQuery to call web services (part of this sample) to return a list of hyperlinks based on items in folders in the FactoryTalk VantagePoint model, the sample creates an alternative web page for mobile browsers other than the traditional FactoryTalk VantagePoint Portal.

This sample has been shown to work with the following mobile devices: Apple iPad (version 2 and 3) Apple iPhone (version 4 and 5)

No other mobile devices have been verified.

Version Support
This sample has been compiled against the 4.0 version of FactoryTalk VantagePoint EMI as a result it works with version 4.0 and 4.5. While new versions VantagePoint typically ships with policy rebinding rules that allow for backward compatibility of client solutions, it may be necessary to recompile the solution for future releases of FactoryTalk VantagePoint EMI.

License and Technical Support

This sample is provided As Is without license and is free for RA customers to use. Furthermore, it should be assumed that there is no guarantee that this sample will upgrade to any future versions of FactoryTalk VantagePoint EMI.

Additional Resources
Additional resources and support for the various components used to develop these reports can be found in Appendix A as well as technical session T16 Information on the Go: Mobility Solutions from Automation Fair 2012.

3 of 11

User Guide
The web page below allows a developer / report architect to create a URL that calls the web page and passes in a location (target folder) within the FactoryTalk VantagePoint model and displays the content in an accordion style layout. This sample was developed using Microsofts Visual Studio.

Requirements
FactoryTalk VantagePoint EMI v4.5

Files and folders provided

Single Compressed File with o Files MobileLinks.aspx MobileLinks.aspx.cs MobileLinks.aspx.designer.cs Mobile.dll Newtonsoft.Json.dll jquery.cookie.js jquery.querystring.js jquery-1.8.1.min.js jquery-ui-1.8.22.custom.min.js o Folders CSS Scripts Services

Installation and Deployment

Note that all of the steps below were done while logged on as the local Administrator. 1. Place the following files in the IncuityPortal root folder (c:\inetpub\wwwroot\incuityportal): MobileLinks.aspx MobileLinks.aspx.cs MobileLinks.aspx.designer.cs

2. Place the following files in the IncuityPortal\bin folder (c:\inetpub\wwwroot\incuityportal\bin): Mobile.dll Newtonsoft.Json.dll

3. Place the following files in the IncuityPortal\scripts folder (c:\inetpub\wwwroot\incuityportal\scripts): jquery.cookie.js jquery.querystring.js jquery-1.8.1.min.js jquery-ui-1.8.22.custom.min.js

4. Copy the folder CSS under the IncuityPortal root folder (c:\inetpub\wwwroot\incuityportal). 5. Copy the folder Services under the IncuityPortal root folder (c:\inetpub\wwwroot\incuityportal).

How to Use
Once deployed do the following: 1. Using FactoryTalk VantagePoint Manager, create a folder within the model (we will call this the target folder). This will be the folder where the mobile links solution will look for reports. Note that the solution only looks one level deep (1 folder level below the target) for additional content.

Note that there is a known issue where the folder names cannot have spaces in them else you get non-desired results. 2. Add reports within the target folder defined above or add additional folders under the target folder (limit to 1 layer deep). 3. From your browser navigate to the following location: http://<servername>/VantagePointPortal/mobilelinks.aspx?fqn=<targetfolderFQN> Where: <servername> is the name of your server. <targetfolderFQN> is the Fully Qualified Name of the target folder.

An Example
As an example, the folder MyEnterprise.Mobile has a set of sub-folders that contain the content that we want to display.

Using the following URL we can display the content: http://<servername>/VantagePointPortal/mobilelinks.aspx?fqn=myenterprise.mobile

With the result being:

Item Types Supported

This sample is capable of rendering the following types of reports: Trends (Core.TrendTemplate) o Note that these report types are rendered as image files XY Plots (Core.XYPlotterTemplate) o Note that these report types are rendered as image files Status Items (Base.Common.StatusItemCollection) Charts and Grids (RA.CE.ChartAndGridElements.FormatObject) General Hyperlinks (Portal.Hyperlinks)

Note that item types that implement any of the above types should also work.

Special Behavior of URLS

In the case of Trend and XY Plots the url is configured to show the output as a jpeg image, this has the benefit of faster rendering and better sizing on the targeted mobile device. This is done by adding showasimage=true to the url. In the case of StatusItems and StatusItemCollections the url is also modified with the following parameter mobile=true which will remove any links to other content (links may go to content that is not mobile compatible) and links to trend. The result is the most basic status item is shown. These urls are created in the LinkBuilder web service and if desired can be modified in the LinkBuilder.aspx.cs file.

Known Issues and Limitations

1. Folders and Item Names with spaces in them may cause problems with the output. Spaces in folder names may cause duplicate items when rendered. 2. Output from Excel reports (Office.ExcelReportTemplate) are currently not rendered. 3. Most of the FactoryTalk Metrics reports that are imported when using the FactoryTalk Metrics connector are of type ReportExpert.Hyperlink and are not rendered. The work around is to create new Portal.Hyperlink items pointing to the same SSRS report.

Appendix A Overview of the technology used

This solution uses the following technologies:

Technology ASP.Net

Files LinkBuilder.asmx, LinkBuilder.asmx.cs

jQuery / JavaScript

jquery.cookie.js, jquery.querystring.js, jqueryui-1.8.22.custom.min.js, jquery-1.8.1.min.js

CSS

jquery-ui-1.8.22.custom.css and associated images folder

.Net Serialization (3rd Party Assembly)

Newtonsoft.Json.dll

Html / jQuery /JavaScript

MobileLinks.aspx, MobileLinks.aspx.cs, MobileLinks.aspx.designer.cs

Description / Purpose Web Service that calls into the VantagePoint Model via the VantagePoint .Net API to fetch items and create a list of hyperlinks to be displayed. jQuery provides a number of plugins with established functionality such as the handling of cookies, query strings and certain UI behaviors such as the Accordion used in this solution. CSS is used to style the accordion. If desired other CSS can be generated by visiting the jQueryUI website at: http://jqueryui.com/themeroller/ Open source assembly that provides efficient JSON serialization of .Net data. Used by the LinkBuilder web service. Technically ASP.Net web pages, these pages make no server side calls and rely on jQuery and JavaScript to dynamically generate html for the rendered output.

*Note other files are required for this solution, but the above table is meant to provide a high level understanding of the key components of the sample.

Appendix B

Left blank on purpose

Appendix C

Left blank on purpose