# Migrating eDetailers From Other Platforms / Creating JS eDetailers
In this section, you will find a guide to migrate your existing eDetailers from your previous applications or creating a new JS eDetailer. We are going to detail Pitcher Presentation approach due to out of the box automatic slide based reporting capabilities and easy cross platform compatiblity. As described in previous section a custom interactive JS app can be built as a eDetailer as well, you can see below the application workflow for Pitcher Presentation and Custom Interactive and comparison with a Custom Interactive document so you can decide which approach suits your project.
NOTE
If you are creating a new eDetailer, you can just copy you eDetailer HTML code to the described slides or you can work directly using the described debugging tools for the corresponding platform (Pitcher Impact iOS, Windows, Android or Pitcher Connect).
# Application Workflow
Before migrating an existing edetailer, it is important to understand how the application works.
NOTE
Presentation type of documents are converted into JS app eDetailers during Pitcher Conversion process. The HTML output can be edited after the initial conversion is completed.
# Presentation - Custom Interactive Comparison
Before deciding which type of JS app is more suitable, you can check the comparison table below.
# Migrating/Creating JS eDetailer via Pitcher Presentation
Depending on your target platform and JS app dimensions, you can pick either 16x9 (Windows/Android) or 4x3 (iPad) aspect ratio for your dummy PPTX file. We are using a 16x9 PPTX file as shown in the screenshot so when we test on a Windows tablet with 16x9 screen aspect ratio, the content would fill the screen on full screen application mode. If your customer will be using only iPad devices, you can continue with 4x3 aspect ratio. We picked a dark background color so changing slide image files in the JS app folder can be optional.
While it is technically possible to do your own Presentation type JS app and upload through Pitcher Admin API, using Pitcher Conversion Engine through Pitcher Admin is much faster for creating a Presentation type JS app as a starting point.
Uploading/Converting Dummy PPTX file
You can upload for PPTX file through Pitcher Admin on your Workbench/Sandbox environment. After conversion is completed you can setup Kudu deploy to work through a GitHub repository.
Converted Presentation JS App Folder Structure
This shows an example of a converted Presentation JS App folder. All the files listed are essential and should not be deleted. Each platform have platform specific files (windowsOnly, iPadOnly, etc...) and gets copied over to the root eDetailer folder when the JS app gets downloaded by the Pitcher Impact application. You should not load all the project files in these platform specific folders. Only existing Slide html files can be adapted/aligned under these folders for the target platform. Since these htmls will be copied from /1223128_1629120811/windowsOnly/ to /1223128_1629120811/ folder and overwrites the existing html files, all the additional assets can be stored on the root project folder /1223128_1629120811/.
NOTE
Slide count can be increased or decreased after conversion as well by providing the necessary slide specific files and adapting slideOrders.json file in the Presentation folder.
Optional / Disable sendCLM Append Line on Pitcher JS Library
On this step you can see how to disable append command under loadJSON function, it is located as the first command. This is a transparent clickable overlay to report sentiments for the eDetailers and it may overlay your existing eDetailer buttons. You can comment out the line to disable. You can keep it if it does not interfere with your interactive JS app eDetailer and only used for regular presentations which don't have high level of interactivity.
Existing eDetailer Migration Tips
Your previous application may have an edetailer with multiple zip folders for each slide. You simply need to reduce to a single folder application where each slide should be in the same folder by adapting the paths for image, js and css files. Sample set can be seen below.
Converting Multi Folder/Zip Legacy eDetaielers to Single Folder Structure
You can see a sample Single Folder Structure you need to build from the legacy eDetailer zip files and folders. Here all the slide htmls are copied to a single folder and renamed as slide1.html slide2.html and so on until all the slides are there. Their slide specific assets are copied under folders named 01, 02, 03, .... and so on, you can see all folders and its JS folder contains only index.js because it is slide specific and on the main project folder JS folder contains all the common JS libraries and pitcher.js file as well. Next step we will multi-edit html and JS files to make it compatible with single folder structure.
Replace All Links in All Files To Adapt Links as Slide Numbers Instead of ZIP Filenames - Part 1
If you open your folder in a text editor as a project, you may search all files which contains a specific text. In this example we will be using Sublime 3 text editor. By looking to any of the html slide files, we can see the links between the slides are given with a javascript function called ...gotoSlide with the target slide's zip filename. Since we copied all the slides to a single folder and renamed them with numbers, we will be using their number as the parameter here. It is possible to multi replace the same string from multiple files at the same time. In this example we rename 'GBR_Systane_EN_10_Systane_gel_drops.zip' string in goToSlide function with '14' which is the corresponding slide number. We do this for all the slides and links. Multi replacing them in all the files lets us finish this process under 10 minutes.
Replace All Links in All Files To Adapt Links as Slide Numbers Instead of ZIP Filenames - Part 2
This is how it should look in all the htmls' links when we are finished replacing slide numbers with the legacy zip filenames. As you can see the slide numbers are used on gotoSlide function's parameters.
If Exists: Remove Custom Swipe Library From Slide HTML Files and Swipe JS Function From All index.js Files
Since Pitcher Impact for iOS/Windows/Android provides native level natural swipe gesture between the slides, we need to remove javascript level swipe library from slide html files. It was added with the script tags. Also we are going to delete the swipe function to prevent any JS console errors. You can see the lines need to be removed on this screenshot, it is highlighted with a selection. This swipe function needs to be removed from all slides' index.js files if it is used.
Adapt Slide Specific Image Style and Javascript Paths
Each slide html file refers to their assets from their own folder as it was structured in Launchpad before copying to this Single Folder Structure. So we need to add the corresponding folder number in front of their paths. For this slide5.html we add "05/" in the beginnging of the img tag src paths, the style.css href path and the index.js slide specific js library src path. The common js files are still located on the same folder level so they don't need a change. We also need to add pitcher.js which is also now located under the common js folder. Common pitcher.js can be added right under jquery-1.12.4.min.js definition.
Beautify Legacy Platform JS Library and Change goToSlide Function
Since most other platform common js libraries are minified/obfuscated, you can use a code beautifier to make it more readible. If it is not possible you can also find the goToSlide function by searching in the codebase. After the beautify process or if you find the function in the minified/obfuscated version, it is easy to edit it's contents. We commented out the existing function and added Pitcher platforms cross platform compatible slide navigation function. You can use the same modification shown in the screenshot and added below for reference. First line parses the parameter and substract 1 because the function's page definition is 0 based. Ti.app.firevent function is Pitcher Impact's API function used for communicating with the native part of Pitcher applications. Here we tell Pitcher Impact app to navigate the current view to the new slide number. This slide navigation action is reported automatically to Pitcher Insight (Business Intelligence) application.
goToSlide: function(e, t) {
var page = parseInt(e) - 1;
Ti.App.fireEvent('gotoVSlideH', {
'p': page
});
}
Disable PreventDefault function on TouchMove
Pitcher Impact has native swipe functionality on mobile devices but it can be blocked and unblocked in JS file on each slide's index.js or pitcher.js file on document.addEventListener section for touchMove event. In this example it was already blocked so we need to remove this block by commenting out the preventDefault line as shown in the screenshot in all index.js files to activate Pitcher Impact's native swipe gesture.
Pitcher Impact on Different Platforms and Pitcher Connect
Pitcher Impact mobile application is native to three platforms iOS, Windows and Android. Each platforms debugging capabilities differ from each other.
- For iOS platform, macOS operating system provides a free of charge iOS Simulator software and Pitcher Support team can provide a simulator build of the Pitcher Impact application, which allows debugging through Safari Web Inspector possible for JS app eDetailers. You can start using Safari web inspector after setting up instance access and downloading your files.
- For Windows platform, you can use Visual Studio Community Edition provided also free of charge, if you install all the required packages during installation, this application allows debugging installed app packages. You can install Pitcher Impact from Windows Store and after setting up instance access and downloading your files, you can start Pitcher Impact application in debug mode (Script Only option needs to be selected on Visual Studio debug installed app package screen).
- For Android, Chrome debugging tools can be used on macOS or Windows platforms by using Android Simulator or an actual Android device.
- For Pitcher Connect, web based edetailer player, you can use any modern browser for debugging because the same content is served online from a cloud distribution network node.
NOTE
For Pitcher Impact iOS platform, these device keywords needs to be added for your device/user: PitcherAgency and PitcherAgencyScreenshot. This will help you for finalizing your manual edetailer creation/migration process in creating all the required slide images automatically based on the slide's latest satus after html implementation. For Windows and Android the slide images needs to be prepared manually or they can be left as dark/black images. These images gets shown for a very short milisecond duration before the HTML gets rendered on top of it.
Single Folder Structure Final with Presentation Thumbnail PNG File
The converted presentation contains fileID_timestamp.png file. Here as an example you can see from the filename 349212_1525357851.png which can be seen in the converted presentation's folder. This is the thumbnail image representing the whole presentation. You can update the thumbnail image with any image with the same ratio, you can upload a higher resolution image if you are not happy with the how the thumbnail image looks on the Pitcher Impact UI file list. After this step the single folder structure JS app folder is completed. We are going to copy all the files from this folder to our dummy Presentation's html folder. Which either can be done on iOS Simulator download location or Windows app file download location for testing/debugging or directly on Pitcher Admin to be tested on an actual iPad, Windows device or Adroid device. If you upload on Pitcher Admin, you click Edit on the Presentation and switch to HTML section and choose upload files and drag drop all the files from Single Folder Structure. Another option would be downloading the converted content folder, adding all the content inside and zipping the main folder back with the same name and choosing Overwrite option on Pitcher Admin to upload the new version which would overwrite the cloud copy.
NOTE
You should not forget to copy/overwrite the slide html files under platform specific folders too. iPadOnly, WindowsOnly, AndroidOnly. Pitcher Connect uses the root folder slide htmls directly. For better compatibility if your customer is using both iPads and Windows devices, you can adapt the slide htmls under the platform folders to make it compatible for multiple platforms.
NOTE
You should not delete any existing files/folders from converted Presentation folders as most of the files are required for proper functionality for viewing this edetailer on multiple platforms.
iOS Only: Device Keyword for PitcherAgency and PitcherAgencyScreenshot
This keywords will mark your device where Pitcher Impact is installed as an agency device with screenshot capability.
iOS Only: Screenshot Button
The black background white icon button on the top right corner of the screen appears when you have the keywords assigned properly on your device. We launch the eDetailer and on the first slide we click on this button and choose Yes or No from the popup asking Would you like to include the menu?. The button is shown with a red arrow annotation on the screenshot below. The initial reason for the popup on how long it should wait before taking a screenshot of the slide so you can test both options to see which option provides the best results for your eDetailer.
Pitcher Impact will open each slide and take a screenshot to prepare slide images. The auto created images can be extraced from iOS Simulator Pitcher Impact's Pitcher Folder's parent folder or from iPad's Pitcher Impact by connecting iPad to your computer with a usb cable, these images can be accesses under the app storage section. You can see the slides folder under iPads file sharing section.
Optional: PDF Version For LeaveBehind Function
During the initial upload or afterwards through editing file metadata on Pitcher Admin, you may allow this presentation to be shared as a leave behind. Allow Sharing settings allows this eDetailer to be shared in multiple ways. One of which is a file attachment using the native email application. When users are allowed to share this eDetailer through their own email application, it will actually share the static Slides.pdf file located in the same project folder. So we can combine all the slide screenshots and combine into a PDF file named Slides.pdf and overwrite the same file in the project folder. So users can share this static version of the Launchpad only if they are allowed to. Here we used Adobe Acrobat Pro DC application to create the PDF file from Slide png images.
