In this document and accompanying video we will discuss a new feature in Version 12 that allows us to bind data images to fields in the UX Component (the UX Component was previously called the Dialog Component in Version 11).
In this example we have a MySQL table that contains seven records. One of the fields is a BLOB which contains binary data for JPG images:
We can see that the table is bound to this UX Component as we use the buttons to navigate through the records of the table, however there is no image field:
This was accomplished by using the genies that are available to us. First we click on the Design tab, then on Server-side under Events. In onDialogInitialize we specify ExecuteServerSideAction to Get Primary Keys:
Next click on Data Binding, then click Bind the controls on your UX to fields in one or more existing tables. Click on Specify Tables when the Bind Dialog Controls to Table Fields window opens:
For this example we bound the UX Component to the salespeople table:
Now let's add an image to display in that control. We start by clicking on Controls, then LASTNAME. Under Data Controls we will choose [Image] then type image1 when the New Control window appears:
After we click OK we see that this will place an image on the component:
But when we click on the Working Preview tab we will not see an image there because we still have not bound that image to the field in the corresponding record:
To bind the image we go back to the Design tab, click Data Binding then Bind the controls on your UX to fields in one or more existing tables just as we did before, but this time we will choose Bind Dialog Controls to Table Fields:
When the Bind Controls to Fields window appears we will choose image1, then bind it to the IMAGE BLOB field in the record:
After we click OK we can go to Controls and take a look at the properties for this control. Under Data Binding and Image type we have defaulted to JPG as our image type for this example because our BLOB field contains JPG data, but we could specify any of these other data options depending on what type of data was stored in the binary field:
Now when we click on the Working Preview tab and scroll through the data we see that the binary BLOB field that is in the table is bound to the image control, and shows each image associated with that record when we click Next:
The first record, however, shows no image. This is because there is nothing in the binary field for the first record:
We can change that by clicking on the Design tab, clicking [image1] then clicking No image found image under Properties:
This will bring up the Specify Image window, and we can specify that if there is no image found for a record, we would like to use one of the Built-in Alpha Five Images:
After clicking Select we will choose Addin Images, then type "missing" to bring up some missing image icons to choose from:
Click Save, then go back to the Working Preview tab to see that now there is a missing image icon displayed when there is no image associated with a record:
There are other useful options available as well. Scale image on server means that before the image is rendered and sent to the browser the server will scale it:
The other option is to Embed image in HTML so that the image data gets Base64 encoded and then embedded directly into the HTML that gets rendered. This reduces the number of server round trips to fetch images:
