Skip to Content
Author's profile photo Midhun VP

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.

ScreenHunter_04 Jul. 07 01.03.jpg

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

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

          }


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.


Untitled.png



/wp-content/uploads/2013/07/19_241980.png

Happy Coding!

Midhun VP

@midhunvptwit

Assigned tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jitendra Kansal
      Jitendra Kansal

      good to know it. 🙂 thanks for sharing.

      Rgrds,

      Jitendra

      Author's profile photo Former Member
      Former Member

      Nice and helpful  information!!!

      Kind Regards,

      Amey

      Author's profile photo Former Member
      Former Member

      hi Midhun,

      very useful...and good to know this.

      Regards,

      Prasad Sistla.

      Author's profile photo Tahir Öz
      Tahir Öz

      Thanks for sharing Midhun, helpfull information.

      Regards

      Tahir

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Good to know that it helped you.

      Author's profile photo Former Member
      Former Member

      Thanks for sharing Midhun !

      Author's profile photo Sumeet Shahapeti
      Sumeet Shahapeti

      Nice and helpful information.

      Thanks Midhun

      Regards

      Sumeet S

      Author's profile photo Former Member
      Former Member

      Appreciate your work...!!!!

      All the best....!!!

      Author's profile photo Former Member
      Former Member

      Nice and good information. Thanq for sharing this

      Author's profile photo Hemendra Sabharwal
      Hemendra Sabharwal

      Nice work, thank you so much Midhun.

      Warm Regards

      Hemendra