How to embed graphics in your app?

Graphics is worth a thousand words. The embed feature allows to preview office documents – like PowerPoint schemes, Visio diagrams or others – in webpages in read only. When the source document is changed, the embedded document is changed simultaneously with no manual work needed.

Here are a few examples:

  • A process map allows users to quickly access process-related documents and understand your company value chain. In this example, the source is a PowerPoint document with hyperlinks.
  • In the process page, the HR process flow is also an embedded power point document.
  • The organization chart is another way to quickly view related information per entity and department. Other examples would be a graphical asset inventory or a plan of the shopfloor to access related equipment details.

Simply upload source documents in a document library, in their native format. In this example, the process map in PowerPoint format is saved in the compliance document library and include hyperlinks to specific pages in the app. When opening the document in the browser, in the File menu, Share submenu, the embed code can be copied. Note that you can set dimensions to fit typical screen size in your organization.

In the process map page, you can add the embed web part, paste your code, verify it shows correctly, and save.

In the HR flow example, the embedded PowerPoint displays in a master detail component, in a specific tab. To do this, the embed code is added in the process form in a multiple line of text field. By editing the field, the embed icon is visible and the code can be pasted in the popup.

In the process list settings, the workflow column was created for displaying graphics. This is a multiple line of text field with enhanced rich text. Make sure you create a view with this column selected only. This will be needed in the master detail component to view the flow in a tab.

In the BPA Form settings, simply add the workflow column and place it below a section so you have it full width.

As a conclusion, embedding graphics in your app is simple and easy to maintain. It’s also self-explaining for end users and increase user adoption.