Successfully!

Error!

[General] Use Tab Component to Achieve App Layout Effect

  • Last update:  2021-12-13
  • I. Version introduction

    iOS/Android supported version  JAR package
     10.0/9.0
     8.4 and later versions  2017-04-01

    II. Description

    Tab layout can avoid multi-level drilling and returning. It can be switched within a report. If the number of drilling layers is too large, the operating experience of the person watching the report will drop a lot. In this case, the Tab component can be used.

    1.png

    III. Actual effect

    To create a new dashboard, first drag theTabcomponent in the dashboard, then add a new layer ofTab component to the first level of tab component, and add theReport Block component to the second level of tab component, and pass the dashboard. The parameter linkage of the components can realize the data analysis of different dimensions under different Tab series.

    The report style is designed as follows:

    2.png

    We take the mobile phone industry in the industry list as an example to illustrate the parameter linkage between components. The setting methods of other Tab pages are the same.

    Create a new built-in datasetMobile, where the time period includes monthly, quarter, and annual.

    3.png

    Drag in two report blocks, the one on the left isreport0, the one on the right isreport1, and the interface of the report blockreport0on the left is set as follows:

    4.png

    Right-click cellA1, clickHyperlink, enter the hyperlink window, click the+sign to add theCurrent Dashboard  Object, the dashboard object is report1, the value of parameter a isMonthly, which means that when the parameter is monthly, report1 is monthly data, and then add another Current Dashboard  Object, the decision report object isreport0, the value of the parameterline is1, which means that the value of line is 1, and report0 is refreshed.

    5.png

    6.png

    The parameter a in the hyperlink of cell A2 isQuarter, and the value of line is2.

    The parameter a in the hyperlink of cell A3 is Annual,and the value of line is3.

    Other settings are the same as the hyperlink settings of cell A1.

    Right-click cell A1, clickConditional Fromatting, and the Conditional Fromatting dialog box will pop up. When the formula is$line = 1, the background color isblue and the font color iswhite, as shown in the following figure:

    7.png

    When the Conditional Fromatting of cell A2 is$line = 2, the background color isblue and the font color iswhite.

    When the Conditional Fromatting of cell A3 is$line = 3, the background color isblue and the font color iswhite.

    The report block (report1) interface on the right is set as follows:

    9.png

    Cell B2 is set to filter to display the data when the value of parameter a, as shown in the figure below:

    10.png

    Cell A2 is the sequence number formula is =seq(), which is sorted according to B2, so the left parent cell of cell A2 is B2.

    And the conditional formatting is set in cell A2 to achieve interlaced Different Row Background Color, as shown in the figure below:

    11.png

    At this point, the first Tab page is set up, and the other Tab pages are similar to the above steps, so don't repeat them one by one.

    At this time, can see that multiple layouts can be switched in the same interface, reducing the trouble of drilling through layers.

    After clickingPreview,can see the effect in the description.

    Note: In the body of the dashboard, the mobile terminal attribute mobile phone re-layout check box should be removed.

    Note: Tab is supported in App9.0, but in App8.0, you need to click Template>Mobile Attributeand select HTML5 parsing. 

    The completed template can be viewed in:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Dashboard\Industry Ranking.frm

    Industry Ranking.frm

    Attachment List


    Theme: Fine Mobile
    Already the First
    Already the Last
    • Helpful
    • Not helpful
    • Only read

    Doc Feedback