How do I directly display form images in reports?

Prerequisites:

• The experience edition does not support
• Create an in-app 3.0 report. For more information, see FAQ 1.

1. Usage scenarios

If you want to visually display the product image corresponding to the product name during data statistics, please refer to the following case to build the implementation.

2. Create steps

Create a normal form

• Select a single-line text and image Upload component on the form design.

Create a report

• Select the table component for the report, select the form created above for the dataset, and select the product name and image Upload_preview address for the fields.

• Submit form data

3. Achieve results

Directly display the uploaded image in the form data for the report, as shown in the following figure:

4. FAQ

4.1 How does the old application 3.0 report Display images?

3.0 direct report Display images only Support Report applications under new applications. When 3.0 reports in old applications want to display images, the following methods must be implemented.

4.1.1 create an action to obtain the image address

First, click the image upload component on the form page, select advanced, create action in action settings, and then select onSuccess Upload succeeded.

The code is as follows:

export function onSuccess(file, value) {
  this.$("单行文本组件的唯一标识").setValue("http://www.aliwork.com" + file.imgURL)
  console.log('onSuccess', file, value);
}

Submit form data rendering:

4.1.2 report settings

Pull a table component, select the product name field in the table column, and set the cell image in the field. Here, select the single-line text component assigned as the image address in the preceding steps.

The final effect is shown in the following figure:

-------------------- Get the latest information YIDA, welcome to follow US--------------------