One of the regular readers of this website was very excited to see that recently, the Custom Extensions were updated to include a Custom Image Extension. Whilst at first glance you might not think it would need much of an extension, or maybe you cannot think of a requirement, there have been many situations where the logic of dynamic images, dynamic sizing, and so forth could not be done with a styling extension or a bit of CSS.
So what is available in this type of extension? In a Custom Image Extension, you can leverage the following Control Methods to customize your image.
| getWidth() | The width of the control (not just for image controls) |
| getHeight() | The height of the control |
| getImageSource() | The URL representing the source of the image |
| getLinkUrl() | The URL used if the image is clicked |
| openLinkInNewWindow() | Will the link open in a new Window? |
| getHorizontalAlignment() | The alignment of the image |
| getCaption() | The text caption of the image |
For a quick demonstration, the following project will create a dynamic QR code according to your chosen URL. The image can resized on the fly using the sliders, and you can set the URL and whether it will open in another window:
The Custom Image Extension will generate a QR code and the user can manipulate the size of the image to see it changing dynamically. You could even then put the dynamic image in your Forms. Or use it to send a link to someone for a GetCheckPoint. Lots of ideas!
There are lots of applications where the ability work with a Custom Image Extension will maker life easier. There is a good example in the Example Projects – it’s called Health Diagnosis and check out the diagnosis page with the dynamic image. The example project contains the JavaScript for the Custom Image Extension in the usual folder.
You can get the example Zip file from the OPA Hub Shop.