The Picture form field

Applies to version 2020.1.x, author: Franciszek Sakławski

Introduction

When building your business proces, there is the ability of adding a logo, picture, or other image decoration to the form – the simplest way to this is by using the “Picture” form field.

Form field configuration

To add a picture to the form, select the “Picture” form field.

Fig. 1. The “Picture” form field configuration

Adding a picture to the form is simple and intuitive. Like on the screenshot below, press the “Upload” button to open the file selection window from the disk:

Fig. 2. Adding the picture to the form

The above methods are one of three ways to add the picture:

1. Pressing the “Upload” button and selecting a file with your picture in the window (Fig. 2)
2. Dragging the file to the picture field (“Drag and drop” option)
3. Clicking on the field and using the Ctrl + V shortcut (if the picture is in the clipboard)

Removing the added picture is possible by using the “Remove” button. Adding or removing the picture is possible only if the field is editable. Otherwise, the “Upload” and “Remove” button will not be visible.

In the advanced configuration there is the option to set the displayed picture details:

Fig. 3. The advanced configuration

You can e.g. reduce the size of the displayed picture:

Fig. 4. The change of the picture size

Dynamic picture display

WEBCON BPS Portal gives the ability to calculate the value of the picture in real time (without the need to save the document).

To do this, a dictionary workflow that stores the picture data was defined:

Fig. 5. The form of the dictionary that stores the picture data

The “Picture” field is filled with the base64 value of the picture. Base64 is a transport coding method, any picture can be encoded in this way. The base64 value can be found in the database by referring to the column in which the picture is stored:

Fig. 6. A query calling picture in base64 format

In the way described below, two instances of the dictionary workflow have been added – each of which stores the company logo. One logo with a black frame and the other without a frame.

Fig. 7. A report storing the dictionary process instances

If the dictionary workflow is already configured, fill out the fields. Two fields are defined on the form:

1. “Picture” – a field that stores the picture
2. “Picture selection” – a choice field with the data set in the form of our dictionary process

In the “Picture selection” field configuration, select the “Choice field”.

Fig. 8. The configuration of the “Picture selection” field – the left panel

Then in the “Data source” field select “Data sources” -> “Dictionaries” “Picture” (previously defined dictionary). In the “Behavior” field select the “Autocomplete” option and check the “Value change will cause default values to be refreshed”.

Fig. 9. The configuration of the “Picture selection” window

Notice, that this field will not refresh all default values set. For a field to be considered, two conditions should be met:

1. The field must be empty – if a value is entered in the field, it will not be considered
2. The “Set when refreshing default values” field must be checked on this field

For more information about default values, see Form fields default values.

Given the above, we can construct a scheme of operation of our field:

Fig. 10. The scheme of operation of the “Picture selection” field

Let’s configure the “Picture selection” field to clear the “Picture” field value. Go to the “Style and behavior” tab and in the “Form rule to be executed on value change” fill in the rule defined below:

Fig. 11. The form rule that clears the “Picture” field

Then go to the “Picture” field configuration to set the default value and check the “Set when refreshing default values” field.

Fig. 12. The configuration of the “Picture” field

Using the icon of three dots, you open the editor. In the editor go to the function tab and from the “Integration” list select the “SQL COMMAND” option. Then place the following query in it:

Fig. 13. The SQL query editor

In the SELECT clause select the field that stores the picture code, while in the WHERE clause we find a dictionary workflow instance which relates to the selected value from the “Picture selection” field. Linking to an instance can be done by linking a GUID number. This is a unique string of 32 characters. Each element in the system has its own GUID.

Let’s go to the form and verify our configuration:

Fig. 14. Dynamic picture

A field with a picture changes value depending on what is in the picture choice field – that means that field and rule has been configured correctly.

Presenting the picture on a report

To add a picture to the report, define an additional field which will store a link to the picture in base64 format.

An example link:

Let’s briefly analyze the components of the link:

1. class=”fit-width” – means that the picture should match the width to the container in which it is stored.
2. src=” base64 with the picture value” – src – source (picture source), we will put the base64 value of our picture in quotation marks.
3. alt=”” – is used to alternatively display the picture value – if something goes wrong while displaying the correct content. We leave it empty because we know that in our case the picture will definitely be displayed.
4. title=”” – after hovering over the picture, the title of the picture will display after a short time – we leave it empty because we do not need such functionality.
5. style=”max-width:50%; max-height:50%;” – describes the maximum size of the picture on the report. In our case, we leave 50% both vertically and horizontally.

The next step is to fill the field with a value. To do this, create an additional field on the dictionary workflow, which after selecting the picture will generate our link.

Go to the WEBCON BPS Designer Studio and create the multiple lines of text type field and define the form rule to fill it with the link value. A field called “Picture-link” has been defined on the dictionary form, then a rule was created for the “Picture” field to change the value of the field.

When editing the field storing the image, go to the “Style and behavior” tab and define a rule. Please note, that when creating rules you can add character strings to each other by using the “+” sign as shown below. Additionally, the built-in “SET” function was used which allows dynamic filling of the field with the value.

Fig. 15. The form rule

Thanks to the rule defined above, for each time when the “Picture” field value will be changed, the “Picture-link” field will be filled out with the picture link.

Fig. 16. Filling in the field with the link

If the field was correctly filled in, go to the report configuration. For more information see -> Reports - configuration, view, editing.

When the report is created, a column should be added to it that stores the link.

Fig. 17. The report configuration

For the above configuration the report is presented in the following way:

Fig. 18. The report with the listed picture

As you see, the picture is correctly displayed. If you want to reduce the size – change the “style” part in the link.

Fig. 19. The change of the “style” part

As you see the picture on the screen has reduced its size.

Fig. 20. The report with the reduced picture

It is worth nothing that the field was dynamically filled in twice – once with the picture and then with the picture link. In each case, a different functionality has been used – in the first case the default value, and in the second definition of the form rule when changing the field value.

Summary

Thanks to correctly configured form rules, you can easily manipulate pictures. This will help you to organize reports and increase the transparency of the presented data.