How to Change the Background Image for a Panel Card at Run-time
Description
The background image for a Panel Card can be changed dynamically at run-time.
Discussion
The Has backround image property allows you to add a background image, specified by the Image name property, to a Panel Card. The background image is usually specified at design time in the UX Builder. You can, however, dynamically change the background image for the Panel Card, adding or changing it at run-time.
Being able to dynamically define the background image at run-time allows you to change the image when an action occurs, such as when the orientation of the mobile device changes from portrait to landscape. In this situation, you may want to use one image when the device is in portrait mode and another when in landscape mode.
To change the Panel Card's background image at run time, you need to set the backgroundImage property for the Panel body's style. The example below demonstrates how this is done:
Example
//get the id of the 'body' part of the Panel Card
var id = {dialog.object}.panelGetId('PANELCARD_1','body');
//set the background image to 'image2'
$(id).style.backgroundImage = 'url("image2.png")'See Also