INTRODUCTION:
The Image Gallery application allows the user to upload the photos and all the users in the organization can view the photos. The users can view photos with details like the owner of the photo, the number of hits it has, who have viewed the photo and who is viewing it presently. It comes with inbuilt security from Wavemaker.
ABOUT WAVEMAKER:
Wavemaker is a software for building and running custom apps. Wavemaker provides Rapid API App Development & Deployment to build enterprise-grade multi-device apps and leverages Docker containerization for an app-optimized infrastructure.
INSIGHTS:
  • User can add the photos to the library and can view the photos.
  • User can view the users who are viewing the photo at that point of time through the photo icons.
Take a look into the creation:
  1.  Create a CRUD variable it will insert the image details and currentlyViewing(Boolean) variable value to the table(variable_insert).
  2. Add variable_insert to the onClick event of the cards widget, so the variable will be called whenever we open cards. The currentlyViewing value is set to true by default and on the success of the event, it will open image in the dialog box.
  3. Create a one more CRUD variable to fetch the data from the table(get_currently_users) and show it in the list widget, We have to use filters like currentlyViewing = true, imageid=selectedItem.id, userDetails.id != loggedInUser.dataSet.id.
  4. The problem here is get_currently_users variable won’t be refreshed automatically for that I wrote a script in AJAX it refresh the variable in regular intervals of time to give the live data.
  5. Invoke a database API on closing the dialog box that will make currentlyViewing as false so the second variable will show only the images of the users who are currently viewing.

WIDGETS USED IN THE APPLICATION:

1. Grid Layout

  • It is the basic content layout, that caters to multiple layout needs. Using the grid layout, you can divide your page content into cells or grids and place your widgets accordingly. It gives you a flexibility of widget placement without having to get into the intricate design details.

2. Cards

  • Cards represent the view of items that are rendered responsively across a wide range of mobile devices and screen sizes. Cards are the popular UI elements used in the implementation of Google Now; item details on online shopping websites and many more modern mobile and web apps.

3. Upload

  • The FileUpload widget can be used to let users upload files to your apps. Wavemaker FileUpload widget generates a Java Service to enable additional file processing functionality.

4. List

  • The List widget provides a list view of items from a data source. List data can be obtained from various Services like database, queries or web services through Variables. The list provides a variety of flexible templates for defining the display format of each item.