Adding an Image Column in your Lists

When an Image component, placed within a Snapp MX screen, is set to be "Dynamic", a connection is automatically made between an uploaded image and the data record being displayed at the time of the upload. Look at a different record and the image changes correspondingly.

No coding or database updates are needed to make this happen. Snapp MX takes care of all the logistics. To support this function, there's a table within the Snapp MX Repository called "TBL_DYNAMICIMAGES". A record is automatically created in this table whenever a new image is uploaded. This record identifies the Application, Screen, Table and Unique Id. of the data record that the image is associated with as well as its file name.

To display uploaded images in a list located on a different screen you'll need to create a database View that connects "TBL_DYNAMICIMAGES" records with their corresponding application data records.

If your application data is stored in a different Database (not in the Snapp MX Repository), then you'll also need to make sure that the Database Server you're using supports queries to external tables.

Here are the steps:

1. In your detail screen (i.e. the data entry screen for your list):
   
   
   
   • Add an Image component.
   • Size it appropriately to ensure that it will display nicely in the list.
     
   • Click on the Dynamic Image attribute tab.
   • Set the Data Source and Table/View attributes to match the input form values.
   
   
2. Retrieve the following information from the Snapp MX Repository using your database administrator:
   
   
   
   • Open TBL_APPLICATIONS and get the APPLICATIONID (e.g. 5 = the Id. of the application that the images are connected to)
   • Open TBL_SCREENS and get the SCREENID (e.g. 9 = the Id. of the screen that is used to upload the images)
   • Open TBL_TABLEHEADER and get the TABLEID (e.g. 3 = the Id. of table that the images are associated with (i.e. dbo.tbl_YourData))
   
   
3. In your Application database, create the following view (e.g. vw_YourData). This view adds an ImageURL field to the data fields presented in your existing list. This query was designed for MS SQL Server. It's syntax would need to be altered for an alternate database. (Change the URL portion to suit your setup).
   

   SELECT 'http://www.yoursite.com/SnappMX/site/5/images/'
   + SnappMX.dbo.TBL_DYNAMICIMAGES.FILENAME AS ImageURL,
   dbo.tbl_YourData.Id,
   dbo.tbl_YourData.Field_1,
   dbo.tbl_YourData.Field_2,
   dbo.tbl_YourData.Field_3, ...
   FROM dbo.YourData
   LEFT OUTER JOIN SnappMX.dbo.TBL_DYNAMICIMAGES
   ON SnappMX.dbo.TBL_DYNAMICIMAGES.UNIQUEID = dbo.tbl_YourData.Id
   AND SnappMX.dbo.TBL_DYNAMICIMAGES.APPLICATIONID = 5
   AND SnappMX.dbo.TBL_DYNAMICIMAGES.SCREENID = 9
   AND SnappMX.dbo.TBL_DYNAMICIMAGES.TABLEID = 3
   

4. Make the new view accessible to the application (i.e. File > Administration > Data Sources).


5. On the list screen:
   
   
   
   • Select the list
   • Connect the new view to it (e.g. vw_YourData)
   • Add a column for the ImageURL.
   • Set, the attributes, Table Field (Display) to "ImageURL" and the Field Type to "Image".

That's all there is to it. The record images should now appear in the new column added to the list.

Additional Tips:

• If your Database Server doesn't support JOINS to external tables and you really need this functionality just place your application data tables in the Snapp MX Repository.
• For DB2 replace the "+" with "concat"
• For Firebird and SQLite replace "+" with "||"
• For MySQL and Oracle replace
  'http://www.yoursite.com/SnappMX/site/5/images/'
  + SnappMX.dbo.TBL_DYNAMICIMAGES.FILENAME AS ImageURL
  with
  CONCAT('http://www.yoursite.com/SnappMX/site/5/images/',
  SnappMX.dbo.TBL_DYNAMICIMAGES.FILENAME) AS ImageURL