Create Composite Field with Photo and Text

Introduction

This article explains how Joget allows you to combine values from multiple fields into a single output. For example, you can merge an image upload field with a textual input field to produce a unified result that displays both the image and its associated description.

How does it work?

1. In the List Builder, configure the "Member" column by setting the Formatter to BeanShell Formatter.
   
2. In the Bean Shell Formatter, paste the following code 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.

3. 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. Go to the UI Builder > CRUD Menu > Properties > UI (List) > Custom Header.
   
   

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

Expected Outcome

When the form is submitted, the values from multiple fields, such as an image upload and a text field, are combined into a single display, showing each entry with both its visual and textual information in a clear and organized way.

The list shown above is generated dynamically by the form illustrated in the image.

Download sample app