JS Display Different Content According to Device Types

1.1 Problem description

The desired effect is to display different content according to the devices.

1.2 Solution

1) Hide report content: using conditional formatting to control the row height of report content.  The row height of the content to be hided is set to 0mm.

2) Judge device type: using After Initialization event to judge device

2.1 Design report

Create a new report，as shown below：

2.2 Add Widget

Add a text widget nemed "type" and a query widget in the parameter pane, and set the text widget to be invisible.

2.3 Add event

Add After Initialization event for text widget：

JavaScript as shown bellow：

var self = this;
function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if(r != null) return unescape(r[2]);
    return null;
}
if(!window.navigator) {
    self.setValue("Mobile");
} else {
    op = GetQueryString("op");     
    if(op == 'h5') {
    		self.setValue("H5");
    } else {
        self.setValue("PC");
    }
}

Information about parameter named op: Description of OP parameter

2.4 Add conditional formatting

Select A1~D8, add conditional formatting, and set line height to 0 mm.

Enter formula: nvl(type,"H5") = "Mobile"，and click button Add.

For more information about conditional formatting you can refer to: An Introduction of Conditional Formatting

In the same way, add conditional formatting for A10~D14 but change the formula to:

nvl(type, "H5") = "Mobile"

2.5 Save and preview

Save report.

Preview the report in PC:

Preview the report in the browser of mobile devices:

Product_Details.cpt