External Graphics

We have created a feature that allows the user to load external graphics created via html in the graphics app and mobile.

How to set up the external graphics

First the user will have to place the html folder with the content inside it under the pub folder. This folder does not exist and will need to be created manually under the var folder. (The FIN Service does not need to be stopped for these changes)

The path should be something like this (unless you saved FIN in a different location): C:\Program Files (x86)\FIN Framework\FIN Framework {yourVersion}\var\pub

Here it is with the contents inside the dashboard folder.

The user will also want to a include a screenshot (we added Dashboard.png) of the graphic so that you can see that in the graphics app before you launch the graphic. We recommend the ratio be around 16:9 for the screenshot.

Screenshot

Adding a screenshot is optional. It is not needed and will still work without it. The thumbnail will just be a broken image like below.

Once the user adds the files under the pub folder, the user will go in the Folio app.

Then once inside the app, you'll need to create a new record.

The user then has to add the below tags on that record:

finExternalProject (marker tag)
finProject (marker tag)
dis (string property tag) - This is what you want to name the graphic (in our case: Dashboard)
finIcon (string property tag - Optional for thumbnail) - This is the location of the screenshot you want to use for the thumbnail start after /pub...etc (in our case: /pub/Dashboard/Dashboard.png)
finScreenshot (string property tag - Optional for thumbnail) - Same path as finIcon
finThumbnail (string property tag - Optional for thumbnail) - Same path as finScreenshot
graphicOn (string property tag) - Location of where the user wants this graphic to appear (in our case: site)
uri (string property tag) - This is the location of the html file start after /pub...etc and end with #$dis (in our case: /pub/Dashboard/index.html#$dis)

After adding those tags, it should look something like this before you create it.

The user can then hit Apply and go view the graphic in the graphics app or mobile.

You can see below that the new html graphic now has its thumbnail we added and name we gave it.

Once we click on the thumbnail, it will launch to the html graphic.

Need to modify the record properties

If the user wishes to make changes on the properties they created on the record, they can go to the folio app and run "finExternalProject".

Then select the record you would like to modify and hit Edit to be able to make your changes.

Once selected, the below popup will appear to make the edits.

Setting up full view without header and side mini app

If you would like to set up users to launch directly to an external graphic without displaying the header menu and side mini app, you would have to create a string property tag on the user that includes the path location of the html graphic.

Go to the user you would like to add this on and edit them to add a string property tag called finProjectRef with the value being path to the html file. In our case /pub/Dashboard/index.html.

Once that is setup and the user logs in, they'll be directed to that external html graphic like below without the header and side mini app.

Browser not supported