...

1. Start the Joget server and open the App Center.
   
   
2. Login as admin and click on Design New App (See Figure 1below) or click on existing application.
    
    
3. For new application, fill up the App ID with camel case, App Name and click on Save button. (See Figure 2below)
   
   
4. Create New Form, fill up Form Details and click on Save button534px. (See Figure 3below)
   
   
5. In the form, drag two Text Fields and an Image Upload to to upload image. (See Figure 4below)
   
   
6. Fill up the Text Fields and File Upload, for example:
   1. First textfield field with id = 'name'
   2. Second textfield field with id = 'desc'
   3. File Upload field with id = 'image'
      
      
7. Click save and generate a CRUD. (See Figure 5below)
   
   
8. Edit the newly created datalist and edit the Name column to add the Card Viewer Datalist Formatter. (See Figure 6below)
   
   
9. Configure the Card Viewer Datalist Formatter by referring to Figure 7below.
   
   
10. After making sure that you are only displaying the Name column in the datalist, save the datalist.
    
    
11. Next, go to the userview builder and add a new form element. (See Figure 8below)
    
    
12. After that, edit the CRUD and remove the Form (Edit) and save the userview. (See Figure 9below)  
    
13. Figure 9
14. If you have followed steps that have been provided, you can click on Preview but nothing will be showed because no data were keyed in the Form yet.
    
    
15. Therefore, you need to fill in the Form that you have been created, for example:
    a. Fill in the Name with 'Alex'
    b. Fill in the Description with 'Working as IT Support'
    c. Upload an image to be displayed in the card.
    
    
16. Finally, you can see the final result in the Userview. (See Figure 10below)

Card Viewer Datalist Formatter Properties

...