Currently Being Moderated

Level: Advanced


The blog explains how to replace the default AttachmentViewer ( Hyperlink ) with a beautiful attachment icon in a HWC  ( Hybrid Web Container ) application. This helps to improve the look and feel of the application.


Add the AttachmentViewer to the screen

Open the screen where we need to add the attachment. From Controls drag and drop the AttachmentViewer to the screen.


ScreenHunter_04 Jul. 07 01.03.jpg


Right click and “Generate Mobile Work Package”. It will automatically generates the workflow code.

Open the file workflow_jQueryMobileLookAndFeel.html inside Generated Workflow > Purchase%20Orders ( Name of your workflow ) > html > js. And find the key of the AttachmentViewer. It is PO_Attachment in this case.


Adding Image and JQuery Code

I am using jQuery code to replace the hyperlink with a custom attachment icon.

  • Create a folder called images inside the folder “html”.


ScreenHunter_04 Jul. 07 01.44.jpg


  • Copy and paste the image icon to the folder “images”.
  • Open the file custom.js inside Generated Workflow > Purchase%20Orders ( Name of your workflow ) > html > js.
  • Add the following line of code inside the  function customBeforeNavigateForward(screenKey, destScreenKey).

          $("a#PO_Attachment").html("<img  id='Attachment_icon' src='./images/attachment_icon.png'/>");

  • The final code look like this:

          function customBeforeNavigateForward(screenKey, destScreenKey) {

          $("a#PO_Attachment").html("<img  id='Attachment_icon' src='./images/attachment_icon.png'/>");



Now let's run the app and see how the new attachment icon looks.

  • Generate Mobile Workflow Package and assign the app to a user.
  • Run the app.

Here you go,




The default hyperlink has been replaced with a nice attachment icon.


I hope that my blog will help you with creating nice and beautiful attachment viewer.

Your feedback and improvement ideas are always welcome!



Midhun VP


View my profile on LinkedIn

Follow me on Google+


Related Links

Custom UI for Container apps

HWC App with Custom List View



Filter Blog

By author:
By date:
By tag: