FVS Table Component Click to Turn Page

Application scenarios: If you have installed the FVS plugin, you can refer to this chapter to learn about how to create FVS templates.

Note: Mobile devices are not supported.

 Version

Expected Effect

This chapter will introduce how to use the FVS Table Component and FVS Date Time Widget in the FVS template to achieve the effect of page turning. The effect is shown as below:

Ideas

Use formulas to express dates in tables, set parameters and corresponding date and time controls, and achieve page turning effects by clicking hyperlink events or querying through the Date widget.

Creating a FVS Report

Click File > New FVS Report in the top of the designer to create a blank FVS report, and you can customize its name and size. As is shown below:

Designing Date Time Widget

Add a date time control to the canvas, set the name to date, which means the parameter is date.

Set the font size to 16px, select Y-M and yyyy-MM from the Format drop-down box, and set the default value to Formula: =TODAY()

As is shown below:

Designing the Table

1.     Adding a Table

Add a table and click Edit Component to enter the table editing interface. As is shown below:

2. Designing Calendar Style

This section mainly explains the implementation method of the calendar instead of specific style design process.

a. Current Date

Insert the formula =FORMAT(TODAY(),"yyyy MM dd EEEEE") in the cell to get the current date and convert the format. For details of formula, see Special Date Format Conversion.

b. Data

To achieve the calendar effect, you need some data.

• Insert the formula =$date in cell B3 to obtain the value of the parameter date, and sets its format as Date in the Cell Element, and manually enter yyyy MM.

• Insert formula = WEEKDAY(DATEINMONTH($date,1)) in cell B4 to obtain the parameter date for the first day of the month,      and returns current week number, with a return value of an integer between 0 and 6, representing a day of the week (from Sunday to Saturday).

• Insert formula=DAYSOFMONTH($date) in cell C4 to obtain the parameter date for current number of days in the month.

Note: When you complete the setting, the 4th line will be hidden.

c. Date Arrangement

• Cell B5-H5 are arranged in order from Sunday to Saturday.

• Insert the formula =IF(B4 = 0,1,"") to cell B6, which means if the week number of the first day of the month returned by the parameter date is 0, then the result will be the number 1, indicating that  the first day of this month is Sunday.

• Insert the formula =IF(B4 <= 1,1 - B4 + 1,"") in cell C6, if B4=0, then C6=2, if B4=1, then C6=1. Cells D6-H6 are similar to the cell C6, following the same rules.

• For details of inserting simply sum up formula in cell B7-H9, see the template below:

• Insert the formula=IF(H9 + 1 <= C4,H9 + 1,"") in cell B10, and cell C10-C12 follow suit. Principle: the maximum possible value of the cell H9 is 28, and the minimum possible value is 22; while the minimum value of the C4 cell is 28, and the maximum value is 31. Therefore, the formula is executed from cell B10, following the rule of cell H9.

d. Highlight the Current Date on the Calendar

Select all date cells in the calendar, add conditional formatting, choose background color, and apply to the Current Cell. Select Formula and Add three formulas: $$$=day(now()) and month(B3)==month(B2) and year(B3)==year(B2), which means that when the cell value is the current date, the background color will change. As is shown below:

3.     Setting Up Page Turning Hyperlinks

Enter Last Year, Last Month, Next Month, Next Year respectively in cell C13, D13, F13, and G13.

Select cell C13, and add a JavaScript script hyperlink, and add parameter a, whose parameter value is the formula =FORMAT(YEARDELTA(B3,-1),"yyyy-MM").

Enter the JavaScript code:

duchamp.getWidgetByName("date").setValue(a); // Set the value of the parameter control date

As is shown below:

In addition, the JS code is the same in three other cells, and the value of parameter a is:

Last Year: FORMAT(YEARDELTA(B3,-1),"yyyy-MM")

Last Month: FORMAT(MONTHDELTA(B3,-1),"yyyy-MM")

Next Month: FORMAT(MONTHDELTA(B3,1),"yyyy-MM")

Next Year: FORMAT(YEARDELTA(B3,1),"yyyy-MM")

Note: When you first set the hyperlink, the cell style will change, and you can modify it by yourself.

4.     Fit

After setting up, click Back to Editor in the upper lefthand, set the table content adaptive method to Fit, and click Save in the upper right of the designer. As is shown below:

Preview

Click Preview in the upper right of the designer and the effect is shown as in the section "Expected Effect".

Click to download the template: FVS Table Component Click to Turn Page.fvs