Create Composite Field with Photo and Text

Introduction

Joget allows you to combine multiple fields' values into one, such as an image upload field and textual field, to produce the following result.

This list is constructed by the form in the image below.

How does it work?

In the List Builder. observe that the "member" column is made of the BeanShell Formatter.

In the Bean Shell Formatter, this is the code used to produce the result:

String name = value;
String photoFileName = row.get("photo");
String recordId = row.get("id");
 
String output = "<div class=\"profile-wrapper\">";
 
output += "<div class=\"profile-photo\"><img src=\"/jw/web/client/app/membership/1/form/download/profile/" + recordId + "/" + photoFileName + ".\" style=\"max-height:100px;max-width:100px; \"></div>";
output += "<div class=\"profile-name\">" + name + "</div>";
output += "</div>";
 
return output;

The code above constructs the block line by line, wrapping it around a div with a class attribute declared for further customizations later on.

You can improve the result by using CSS code that can be placed into the user view menu itself, for this example, we are placing it in the CRUD Menu. 

<style>
 .profile-wrapper{
        border: 1px dashed grey;
        padding: 5px;
        text-align: center;
    }
     
    .profile-photo{
         
         
    }
     
    .profile-name{
        font-weight: bold;
        padding: 5px;
    }
</style>