门户:如何添加仪表盘

在本操作方法中,我们将使用ManageBrick在门户中添加仪表盘。仪表盘可以是饼图,条形图,top_list或徽章。

名称:如何添加仪表盘

类型:如何

听众:管理员,  IntegratorDeveloper

水平:高级

持续时间:30分钟

关键词:portal,  Customization 

iTop版本:2.5.0

该仪表盘现在带有iTop 2.5及更高版本。

先决条件

您将需要:

  • 装有安装了演示数据和增强门户的iTop系统,
  • 可以访问具有足够权利的账号来连接到门户(通常这意味着拥有门户用户描述),
  • 有一种方法可以修改数据模型定义(创建扩展或使用ITSM Designer)

该教程的目的

在此教程中,您将学习如何:

  • 在现有的门户上添加一个新的仪表盘,如下图所示:
  • 饼形图:

https://www.itophub.io/wiki/media?media=2_7_0%3Acustomization%3Ascreenshot-localhost-2017-12-15-16-19-57.png

  • 条形图

https://www.itophub.io/wiki/media?media=2_7_0%3Acustomization%3Ascreenshot-localhost-2017-12-15-16-23-36.png

  • 排行榜

https://www.itophub.io/wiki/media?media=2_7_0%3Acustomization%3Ascreenshot-localhost-2017-12-15-16-25-29.png

  • 徽章

https://www.itophub.io/wiki/media?media=2_7_0%3Acustomization%3Ascreenshot-localhost-2017-12-15-16-27-02.png

  • 默认图块

https://www.itophub.io/wiki/media?media=2_7_0%3Acustomization%3Ascreenshot-localhost-2017-12-15-16-27-58.png

正在进行的工单ManageBrick的示例

要将饼图磁贴添加到标准用户门户的主页,以在饼图中显示未售票与被解决工单。将此XML代码放入扩展中,运行安装程序并在门户中检查结果。

production.delta.xml
 
<?xml version="1.0" encoding="UTF-8"?>
<itop_design xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  version="1.0">
  <module_designs>
    <module_design id="itop-portal" xsi:type="portal">
      <bricks>
        <brick id="ongoing-tickets-for-portal-user-ext" xsi:type="Combodo\iTop\Portal\Brick\ManageBrick" _delta="define">
        <active>true</active>
        <rank>
          <default>20</default>
        </rank>
        <width>6</width>
        <title>
          <default>Brick:Portal:OngoingRequests:Title</default>
        </title>
        <description>Brick:Portal:OngoingRequests:Title+</description>
        <decoration_class>
          <default>fa fa-etsy fa-2x</default>
        </decoration_class>
        <oql><![CDATA[SELECT Ticket]]></oql>
        <!-- Optional tag to define if the action should be done in a modal window ("modal"), a new window ("new") or the current window ("self") -->
        <!--<opening_target>modal</opening_target>-->
        <!-- Optional tag to define the how the objects should be opened. Values can be edit|view. Note that even if this is set to edit, objects not allowed in edition mode for the user (cf. scopes and security layers) will open in view mode -->
        <!-- <opening_mode>edit</opening_mode> -->
        <!-- Can be either a class tag with the class name or an oql tag with the query -->
        <!-- <class>Ticket</class> -->
        <!-- Optional tag to add attributes to the table by their code -->
        <fields>
          <field id="title"/>
          <field id="start_date"/>
          <field id="status"/>
          <field id="service_id"/>
          <field id="servicesubcategory_id"/>
          <field id="priority"/>
          <field id="caller_id"/>
        </fields>
        <!-- Optional: display type can be 'pie-chart', 'bar-chart', 'list' -->
        <display_modes>
          <!-- How the data can be displayed in the ManageBrick -->
          <availables>
            <mode id="list"/>
            <mode id="pie-chart"/>
            <mode id="bar-chart"/>
          </availables>
          <!-- How the ManageBrick get displayed by default when open -->
          <default>pie-chart</default>
          <!-- How the ManageBrick is displayed in the Homepage and in an AggregatePageBrick -->
          <!-- Possible values are text|badge|pie-chart|bar-chart|top-list -->
          <tile>badge</tile>
        </display_modes>
        <!-- Optional: way to define the export to Excel -->
        <export>
          <!-- Optional tag to export attributes by their code -->
          <fields>
            <field id="title"/>
            <field id="start_date"/>
            <field id="status"/>
            <field id="service_id"/>
            <field id="servicesubcategory_id"/>
            <field id="priority"/>
            <field id="caller_id"/>
            <field id="description"/>
          </fields>
          <!-- Optional way to tell that the export uses default fields -->
          <!-- <export_default_fields>true</export_default_fields> -->
        </export>
        <grouping>
          <!-- Mandatory -->
          <tabs>
            <!-- Optional. Show object count for each tabs. Available values are true|false. Default is false. -->
            <show_tab_counts>true</show_tab_counts>
            <!-- Mandatory. Grouping by tabs -->
            <!--<attribute>operational_status</attribute>-->
            <!-- attribute xor groups tag -->
            <!-- Optional way to limit the number of groups when grouping with attribute -->
            <!-- <limit>5</limit> -->
            <!-- Optional when limit given, display the aggregation of the remaining groups -->
            <!-- <show_others>true</show_others> -->
            <groups>
              <!-- Can be used only with ../oql tag, not ../class tag. Reason is that we can't know the class alias to apply to the condition's fields. We might have an exception saying that the field in ambigious for the generated query. -->
              <group id="opened">
                <rank>1</rank>
                <title>Brick:Portal:OngoingRequests:Tab:OnGoing</title>
                <condition><![CDATA[SELECT Ticket AS T WHERE operational_status NOT IN ('closed', 'resolved')]]></condition>
              </group>
              <group id="resolved">
                <rank>2</rank>
                <title>Brick:Portal:OngoingRequests:Tab:Resolved</title>
                <condition><![CDATA[SELECT Ticket AS T WHERE operational_status = 'resolved']]></condition>
              </group>
            </groups>
          </tabs>
          <!-- Implicit grouping on y axis by finalclass -->
        </grouping>
        <data_loading>full</data_loading>
      </brick>
      </bricks>
    </module_design>
  </module_designs>
</itop_design>

当然,这只是一个示例,请播放并扭曲它以获得所需的内容。

启用导出至Excel

您可以在每个ManageBrick上添加“导出to Excel”特性。

特性支持两种方法来定义导出的属性:

  • 使用与页面中显示的相同的属性:
<brick xsi:type="Combodo\iTop\Portal\Brick\ManageBrick">
  <export><export_default_fields>true</export_default_fields>...
  • 使用导出的特定字段列表,该字段列表将与列表中显示的字段不同:
<brick xsi:type="Combodo\iTop\Portal\Brick\ManageBrick">
  <export><fields><field id="title"/>....

这将在相应页面上显示导出按钮:

https://www.itophub.io/wiki/media?media=2_7_0%3Acustomization%3Ascreenshot-localhost-2017-12-15-16-37-23.png

您必须选择显式字段列表或标签导出_default_fields才能允许导出。

原贴链接:https://www.itophub.io/wiki/page?id=2_7_0%3Acustomization%3Aportal_howto_add_manage_extended_brick


Portal: How to add a dashlet

In this How to, we will add a dashlet in the portal using the ManageBrick. A dashlet can be either a pie chart, a bar chart, a top_list or a badge.

name:
How to add a dashlet
type:
How To
audience:
Administrator, Integrator, Developer
level:
Advanced
duration:
30min
keyword:
Portal, Customization
iTop version:
2.5.0

This dashlet now comes natively with iTop 2.5 and above.

Prerequisites

What you will need to:

  • Have an iTop system with the demo data and the enhanced portal installed,

  • Have access to an account with enough rights to connect to the portal (usually this means having the Portal User profile),

  • Have a way to modify the datamodel definition (creating an extension or with ITSM Designer)

Aim of this tutorial

In this tutorial, you will learn how to:

  • Add a new dashlet to the existing portal, which looks like the following screenshots:

  • Pie chart:

https://www.itophub.io/wiki/media?media=2_7_0%3Acustomization%3Ascreenshot-localhost-2017-12-15-16-19-57.png

  • Bar chart

https://www.itophub.io/wiki/media?media=2_7_0%3Acustomization%3Ascreenshot-localhost-2017-12-15-16-23-36.png

  • Top list

https://www.itophub.io/wiki/media?media=2_7_0%3Acustomization%3Ascreenshot-localhost-2017-12-15-16-25-29.png

  • Badge

https://www.itophub.io/wiki/media?media=2_7_0%3Acustomization%3Ascreenshot-localhost-2017-12-15-16-27-02.png

  • Default tile

https://www.itophub.io/wiki/media?media=2_7_0%3Acustomization%3Ascreenshot-localhost-2017-12-15-16-27-58.png

Example of Ongoing Ticket ManageBrick

To add a pie chart tile to the homepage of the standard user portal, to display open versus resolved Tickets in a pie chart. Put this XML code into an extension, run the setup and check the result in the portal.

production.delta.xml
 
<?xml version="1.0" encoding="UTF-8"?>
<itop_design xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  version="1.0">
  <module_designs>
    <module_design id="itop-portal" xsi:type="portal">
      <bricks>
        <brick id="ongoing-tickets-for-portal-user-ext" xsi:type="Combodo\iTop\Portal\Brick\ManageBrick" _delta="define">
        <active>true</active>
        <rank>
          <default>20</default>
        </rank>
        <width>6</width>
        <title>
          <default>Brick:Portal:OngoingRequests:Title</default>
        </title>
        <description>Brick:Portal:OngoingRequests:Title+</description>
        <decoration_class>
          <default>fa fa-etsy fa-2x</default>
        </decoration_class>
        <oql><![CDATA[SELECT Ticket]]></oql>
        <!-- Optional tag to define if the action should be done in a modal window ("modal"), a new window ("new") or the current window ("self") -->
        <!--<opening_target>modal</opening_target>-->
        <!-- Optional tag to define the how the objects should be opened. Values can be edit|view. Note that even if this is set to edit, objects not allowed in edition mode for the user (cf. scopes and security layers) will open in view mode -->
        <!-- <opening_mode>edit</opening_mode> -->
        <!-- Can be either a class tag with the class name or an oql tag with the query -->
        <!-- <class>Ticket</class> -->
        <!-- Optional tag to add attributes to the table by their code -->
        <fields>
          <field id="title"/>
          <field id="start_date"/>
          <field id="status"/>
          <field id="service_id"/>
          <field id="servicesubcategory_id"/>
          <field id="priority"/>
          <field id="caller_id"/>
        </fields>
        <!-- Optional: display type can be 'pie-chart', 'bar-chart', 'list' -->
        <display_modes>
          <!-- How the data can be displayed in the ManageBrick -->
          <availables>
            <mode id="list"/>
            <mode id="pie-chart"/>
            <mode id="bar-chart"/>
          </availables>
          <!-- How the ManageBrick get displayed by default when open -->
          <default>pie-chart</default>
          <!-- How the ManageBrick is displayed in the Homepage and in an AggregatePageBrick -->
          <!-- Possible values are text|badge|pie-chart|bar-chart|top-list -->
          <tile>badge</tile>
        </display_modes>
        <!-- Optional: way to define the export to Excel -->
        <export>
          <!-- Optional tag to export attributes by their code -->
          <fields>
            <field id="title"/>
            <field id="start_date"/>
            <field id="status"/>
            <field id="service_id"/>
            <field id="servicesubcategory_id"/>
            <field id="priority"/>
            <field id="caller_id"/>
            <field id="description"/>
          </fields>
          <!-- Optional way to tell that the export uses default fields -->
          <!-- <export_default_fields>true</export_default_fields> -->
        </export>
        <grouping>
          <!-- Mandatory -->
          <tabs>
            <!-- Optional. Show object count for each tabs. Available values are true|false. Default is false. -->
            <show_tab_counts>true</show_tab_counts>
            <!-- Mandatory. Grouping by tabs -->
            <!--<attribute>operational_status</attribute>-->
            <!-- attribute xor groups tag -->
            <!-- Optional way to limit the number of groups when grouping with attribute -->
            <!-- <limit>5</limit> -->
            <!-- Optional when limit given, display the aggregation of the remaining groups -->
            <!-- <show_others>true</show_others> -->
            <groups>
              <!-- Can be used only with ../oql tag, not ../class tag. Reason is that we can't know the class alias to apply to the condition's fields. We might have an exception saying that the field in ambigious for the generated query. -->
              <group id="opened">
                <rank>1</rank>
                <title>Brick:Portal:OngoingRequests:Tab:OnGoing</title>
                <condition><![CDATA[SELECT Ticket AS T WHERE operational_status NOT IN ('closed', 'resolved')]]></condition>
              </group>
              <group id="resolved">
                <rank>2</rank>
                <title>Brick:Portal:OngoingRequests:Tab:Resolved</title>
                <condition><![CDATA[SELECT Ticket AS T WHERE operational_status = 'resolved']]></condition>
              </group>
            </groups>
          </tabs>
          <!-- Implicit grouping on y axis by finalclass -->
        </grouping>
        <data_loading>full</data_loading>
      </brick>
      </bricks>
    </module_design>
  </module_designs>
</itop_design>

Of course this is just an example, play and twist it to get what you want.

Enabling export to Excel

You can add the “export to Excel” feature on each ManageBrick.

The feature supports two ways to define the attributes to export:

  • Using the same attributes as displayed in the page:

<brick xsi:type="Combodo\iTop\Portal\Brick\ManageBrick">
  <export><export_default_fields>true</export_default_fields>...
  • Using a specific list of fields for the export, which will be different than what is displayed in the list:

<brick xsi:type="Combodo\iTop\Portal\Brick\ManageBrick">
  <export><fields><field id="title"/>....

This will display an export button on the corresponding pages: https://www.itophub.io/wiki/media?media=2_7_0%3Acustomization%3Ascreenshot-localhost-2017-12-15-16-37-23.png

You have to select either explicit fields list or the tag export_default_fields in order to allow export.

标签:
由 superadmin 在 2020/08/27, 17:29 创建
    

需要帮助?

如果您需要有关XWiki的帮助,可以联系:

深圳市艾拓先锋企业管理咨询有限公司