Card flip report

In the report design about pictures, the line report and the card column report are too traditional and not beautiful. It is hoped to realize the report of the conversion between pictures and text introductions, as follows:

)

Use HTML+CSS technology to achieve.

1) Prepare the data first, as shown in the renderings, we need the contents of three parts: name, avatar, and information

Use SQL to splice these three parts together (because FRDemo does not respond to the table, write the format here)

select name as name, image as profile picture,'name:'+name+'<br>sex:'+sex+'<br>age:'+age+'<br>birth:'+birth+'<br>tel:'+ tel+'<br>addr:'+addr as information from table

2) Put the avatar of the first step data set in cell A1 (horizontal expansion), information in cell A2, and name in cell A4

Fill in the following formula in cell A3:

"<div class='flip-container' ontouchstart='this.classList.toggle(\'hover\');'>" + "<div class='flipper'>" + "<div class='front'> <img src='" + A1 + "' width=120px; style='border-radius:10px;'/></div>" + "<div class='back'>" + A2 + "</div>" + "</div></div>"

As shown below:

3) Hide the first and second rows, and set the column in the Template>Multi-columns/lines, set as follows:

4) Save the card.css file to the project path webroot\help\css, and import the CSS in theTemplate>Web Attributes>Reference Css.

Among them, the CSS file is as follows:

.flip-container {
   /*Set the view where the element is viewed*/
-webkit-perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    /*Define the 3D rotation along the Y axis (the angle of rotation)*/
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 120px;
height: 120px;
}
/* flip speed goes here */
.flipper {
    /*The time required to complete the transition effect*/
transition: 0.6s;
/*The converted child element retains its 3D conversion (keep the state after the movement)*/
transform-style: preserve-3d;
    /*Set the relative positioning of the element*/
position: relative;
}
/* hide back of pane during swap */
.front, .back {
    /*Set the back of the element to be invisible*/
backface-visibility: hidden;
    /*Set the border attribute of the element*/
    border:1px solid #d6ccc4;
    /*Set the rounded corners of the element's border*/
    border-radius:10px;
    /*Set the absolute positioning of the element*/
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
    /*Set the stacking order of the elements, the higher order is displayed in the front*/
z-index: 2;
}
/* back, initially hidden pane */
.back {
    /*Set element background color*/
    background-color:#e7e5e1;
/*Define the 3D rotation along the Y axis (the angle of rotation)*/
transform: rotateY(180deg);
}

Note: The mobile terminal cannot achieve the effect.

The completed template can be found in: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\ReportApplication\BasicApplication\Card flip report.cpt

Click to download the template and the css file :  

Card flip report.cpt 

card.css