Sybase Unwired Platform ( SMP ) – Custom Attachment Icon in HWC Application

The blog explains how to replace the default AttachmentViewer ( Hyperlink ) with a beautiful attachment icon in a HWC  ( Hybrid Web Container ) application. This is a small tip 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.

Right click and “Generate Mobile Work Package”. It 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 my example.

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”.

• 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’/>”);

          }

Result

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.

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

Happy Coding!

Midhun VP

@midhunvptwit