Steps To Import This Plugin

1. Go to the website "insert marketplace plugin link here".
   
   
2. Click "Download" on this plugin screen (It will be a .jar file).
   
   
3. Go to your Joget Workflow localhost or server and login as admin.
   
   
4. In Joget Console navigate to "Admin Bar>Systems Settings>Manage Plugins" and click "Upload Plugins" button.
   
   
5. In "Upload Plugin", select the plugin .jar file you just downloaded, then click "Upload".
   
   
6. Depending on the plugin type, you can now view your new plugin in your form or datalist or userview.
   
   
7. Remember to always uninstall the old plugin before uploading a new version.
   
   
8. The Joget Workflow Knowledge Base has more information on managing and developing plugins.
   
   
9. Alternatively, you can click Download from Marketplace and search for Card Viewer Datalist Formatter and click install from the App Centre. "Might need to add images to show this, will do so after you import the plugin into marketplace."

Steps to use the Plugin:

1. Start the Joget server and open the App Centre.
   
   
2. Login as admin and click on Design New App (See Figure 1) 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 2)
   
   
4. Create New Form, fill up Form Details and click on Save button. (See Figure 3)
   
   
5. In the form, drag two Text Fields and an Image Upload to upload image. (See Figure 4)
   
   
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 5)
   
   
8. Edit the newly created datalist and edit the Name column to add the Card Viewer Datalist Formatter. (See Figure 6)
   
   
9. Configure the Card Viewer Datalist Formatter by referring to Figure 7.
   
   
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 8)
    
    
12. After that, edit the CRUD and remove the Form (Edit) and save the userview. (See Figure 9)
    
    
13. 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.
    
    
14. 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.
    
    
15. Finally, you can see the final result in the Userview. (See Figure 10)

Description of the Card Viewer which will be displayed below the Title text. This is a mandatory field.

If no valid column detected from data binder, this will be literal string with support for hash variable and syntax like {columnName} to map column IDs from data binder.

The URL that will be redirected to when the users click the card.

If no valid column detected from data binder, this will be a literal link with support for hash variables and syntax like {columnName} to map column IDs from data binder.

Form to retrieve image from