门户:如何添加浏览模式

在本方法中,我们将在BrowseBrick中添加一种浏览对象的新方法。此示例与Microsoft Metro UI有关,但是您可以做任何想做的事(例如轮播)。

名称:如何添加浏览模式

类型:如何

听众:管理员,  IntegratorDeveloper

水平:高级

持续时间:60分钟

关键词:门户,  Customization 

iTop版本:2.3.0

现在,此浏览模式自带iTop 2.4及更高版本(作为网格模式)。尽管如此,该示例仍显示了如何向门户添加您选择的浏览模式。

先决条件

您将需要:

  • 知道如何将iTop扩展和升级用作系统,
  • 装有安装了演示数据和增强门户的iTop系统,
  • 可以访问具有足够权利的账号来连接到门户(通常这意味着拥有门户用户描述),
  • 有一些知识枝条 和CSS语言(如果要自定义此示例)。

该教程的目的

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

  • 添加浏览方式到现有的BrowseBrick,如下图所示:

The goal

分步说明

创建扩展

首先,我们需要创建一个iTop扩展,它将更改门户XML配置来定义要使用的主题。从自定义指南中检查扩展模块部分(iTop定制)(如有必要)。

  1. 扩展名命名为sample-portal-add-browse-mode-browse-brick。
  2. 除main.sample-portal-add-browse-mode-browse-brick.php文件,因为我们不需要任何PHP代码。

您应该具有以下结构:

Module structure

创建模板

现在已经完成了扩展,我们需要创建将为该浏览模式呈现的模板。首先为该模式选择一个名称,在此示例中,我们选择了Metro。

模式名称不得包含特殊字符。保持简单:字母数字,连字符,下划线。

然后创建一个名为browsebrick-mode-metro.html.twig的树枝文件,然后复制并粘贴以下代码。 (请注意,文件名并不重要)

browsebrick-mode-metro.html.twig
 

{# itop-portal-base/portal/src/views/bricks/browse/mode_tree.html.twig #} {# Browse brick tree mode layout #} {% 'itop-portal-base/portal/src/views/bricks/browse/layout.html.twig' %} {% bBrowseMainContent %} <div id="brick-content-metro"> </div> {% %} {% pPageLiveScripts %} {{ () }} <script type="text/javascript"> var browseMode = '{{ sBrowseMode }}'; var levelsProperties = {{ aLevelsProperties| }}; var rawDatas = {{ aItems| }}; $(document).ready(function(){ for(var i in rawDatas) { var itemKeys = Object.keys(rawDatas[i]); var itemLastLevelAlias = itemKeys[itemKeys.length - 1]; $('<div class="browse-element vertical-center">'+rawDatas[i][itemLastLevelAlias].name+'</div>').appendTo('#brick-content-metro'); } $('<div style="clear: both"></div>').appendTo("#brick-content-metro"); }); </script> {% %}

如果您不熟悉树枝语言,则会发现它这里的文件.

在开始时,我们扩展了BrowseBrick布局,因此我们不必重新定义整个页面模板。然后,我们将一些标记定义为对象容器,并使用一个JavaScript代码段来解析json数据并填充该容器。

在本操作方法中,我们未在对象上实现操作活动,因此无法单击它们以查看视图。为此,您应该查看itop-门户-base/portal/lsrccviews/bricks/browse/mode_list.html.twig文件,并以相同的方式扩展javascript部分。

现在,创建一个css文件,以便在模板上应用某些样式。将其命名为browserbrick-mode-metro.css,然后复制粘贴以下代码:

browsebrick-mode-metro.css
 

#brick-content-metro{ padding: 20px; } #brick-content-metro .browse-element{ float: left; margin: 0 0.5% 10px 0.5%; width: 19%; height: 120px; text-align: center; background-color: #EA7D1E; color: #FFFFFF; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12) } #brick-content-metro .browse-element:hover{ opacity: 0.85; transition: all linear 0.2s; }

您的文件夹应如下所示:

https://www.itophub.io/wiki/media?w=300&tok=9d026b&media=2_7_0%3Acustomization%3Asample-portal-browse-mode-0.png

更改门户配置

现在我们已经准备好扩展,我们只需要创建一个XML delta,然后将变更和门户配置一起使用即可。打开datamodel.sample-portal-add-browse-mode-to-browse-brick.xml文件,并粘贴以下代码:

datamodel.sample-portal-add-browse-mode-to-browse-brick.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">
      <properties>
        <themes>
          <theme id="sample-portal-add-browse-mode-to-browse-brick" _delta="define">sample-portal-add-browse-mode-to-browse-brick/browsebrick-mode-metro.css</theme>
        </themes>
      </properties>
      <bricks>
        <brick id="services" xsi:type="Combodo\iTop\Portal\Brick\BrowseBrick">
          <browse_modes>
            <availables>
              <mode id="metro" _delta="define">
                <template>sample-portal-add-browse-mode-to-browse-brick/browsebrick-mode-metro.html.twig</template>
              </mode>
            </availables>
          </browse_modes>
        </brick>
      </bricks>
    </module_design>
  </module_designs>
</itop_design>

这会将主题节点添加到门户,以获取砖块的css,将模式节点添加到砖块的可用浏览模式。只需确保包含扩展名和文件名的路径与系统上的路径相同,即可进入最后一步。

升级系统

最后,运行iTop系统的升级,并选中新扩展名选项,然后访问门户。您将看到“新请求”模块的右上角现在提供了新模式。

https://www.itophub.io/wiki/media?w=800&tok=717e4b&media=2_7_0%3Acustomization%3Asample-portal-browse-mode-2.png

https://www.itophub.io/wiki/media?w=800&tok=47bade&media=2_7_0%3Acustomization%3Asample-portal-browse-mode-3.png

资料下载

您可以在这里找到此扩展名:sample-portal-add-browse-mode-1.0.1-156.zip

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


Portal: How to add a browse mode

In this How to, we will add a new way of browsing objects in the BrowseBrick. This example will be about the Microsoft Metro UI but you can do whatever you want (eg. a carousel).

name:
How to add a browse mode
type:
How To
audience:
AdministratorIntegratorDeveloper
level:
Advanced
duration:
60min
keyword:
PortalCustomization
iTop version:
2.3.0

This browse mode now comes natively with iTop 2.4 and above (as grid mode). Nevertheless, this sample still shows how to add a browse mode of your choosing to the portal.

Prerequisites

What you will need to:

  • Know how to make an iTop extension and upgrade your system,

  • 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 some knowledge of the twig and CSS languages if you want to customize this sample.

Aim of this tutorial

In this tutorial, you will learn how to:

  • Add a new browse mode to the existing BrowseBrick, which looks like the following screenshot:

The goal

Step by step instructions

Creating the extension

First, we need to create an iTop extension that will alter the portal XML configuration to define which theme to use. Check the Extension modules part from the customization guide (iTop Customization) if necessary.

  1. Name the extension as sample-portal-add-browse-mode-to-browse-brick.

  2. Remove the main.sample-portal-add-browse-mode-to-browse-brick.php file as we won't need any PHP code.

You should have the following structure:Module structure

Creating the template

Now that the extension is made, we need to make the template that will be rendered for that browse mode. Start by choosing a name for this mode, in this example we chose metro.

The mode name must not contain special characters. Keep it simple : alpha-numeric, hyphen, underscore.

Then create a twig file named browsebrick-mode-metro.html.twig and copy paste the code below. (Note that the file's name is not important)

browsebrick-mode-metro.html.twig
 

{# itop-portal-base/portal/src/views/bricks/browse/mode_tree.html.twig #} {# Browse brick tree mode layout #} {% 'itop-portal-base/portal/src/views/bricks/browse/layout.html.twig' %} {% bBrowseMainContent %} <div id="brick-content-metro"> </div> {% %} {% pPageLiveScripts %} {{ () }} <script type="text/javascript"> var browseMode = '{{ sBrowseMode }}'; var levelsProperties = {{ aLevelsProperties| }}; var rawDatas = {{ aItems| }}; $(document).ready(function(){ for(var i in rawDatas) { var itemKeys = Object.keys(rawDatas[i]); var itemLastLevelAlias = itemKeys[itemKeys.length - 1]; $('<div class="browse-element vertical-center">'+rawDatas[i][itemLastLevelAlias].name+'</div>').appendTo('#brick-content-metro'); } $('<div style="clear: both"></div>').appendTo("#brick-content-metro"); }); </script> {% %}

If you are not familiar with the twig language, you will find its documentation here.

At the beginning we extend the BrowseBrick layout so we don't have to redefine the whole page template. Then we put some markup to define the objects container and a javascript snippet to parse the json data and fill the container.

In this how-to we did not implemented actions on objects, they will not be clickable to view/edit/create. To do so, you should take a look a the itop-portal-base/portal/src/views/bricks/browse/mode_list.html.twig file and extend the javascript part in same way.

Now, create a css file in order to apply some style on the template. Name it browsebrick-mode-metro.css and copy/paste the following code :

browsebrick-mode-metro.css
 

#brick-content-metro{ padding: 20px; } #brick-content-metro .browse-element{ float: left; margin: 0 0.5% 10px 0.5%; width: 19%; height: 120px; text-align: center; background-color: #EA7D1E; color: #FFFFFF; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12) } #brick-content-metro .browse-element:hover{ opacity: 0.85; transition: all linear 0.2s; }

Your folder should look like this :

https://www.itophub.io/wiki/media?w=300&tok=9d026b&media=2_7_0%3Acustomization%3Asample-portal-browse-mode-0.png

Changing the portal configuration

Now that we have the extension ready, we just need to make an XML delta and change the portal configuration to use it. Open the datamodel.sample-portal-add-browse-mode-to-browse-brick.xml file and paste the following code:

datamodel.sample-portal-add-browse-mode-to-browse-brick.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">
      <properties>
        <themes>
          <theme id="sample-portal-add-browse-mode-to-browse-brick" _delta="define">sample-portal-add-browse-mode-to-browse-brick/browsebrick-mode-metro.css</theme>
        </themes>
      </properties>
      <bricks>
        <brick id="services" xsi:type="Combodo\iTop\Portal\Brick\BrowseBrick">
          <browse_modes>
            <availables>
              <mode id="metro" _delta="define">
                <template>sample-portal-add-browse-mode-to-browse-brick/browsebrick-mode-metro.html.twig</template>
              </mode>
            </availables>
          </browse_modes>
        </brick>
      </bricks>
    </module_design>
  </module_designs>
</itop_design>

This adds a theme node to the portal for the brick's css and a mode node to the available browse modes of the brick. Just make sure the path containing the extension and file name are the same as on your system, then we can go to the final step.

Upgrading the system

Finally run an upgrade of your iTop system with the new extension option checked and access the portal. You will see that the new mode is now available on the top right corner of the “New request” brick.

https://www.itophub.io/wiki/media?w=800&tok=717e4b&media=2_7_0%3Acustomization%3Asample-portal-browse-mode-2.pnghttps://www.itophub.io/wiki/media?w=800&tok=47bade&media=2_7_0%3Acustomization%3Asample-portal-browse-mode-3.png

Downloads

You can find this extension here: sample-portal-add-browse-mode-1.0.1-156.zip

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

需要帮助?

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

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