页面历史

由于很多客户对Logo文字，图片等有较多个性化需求，我们就在产品中增加了界面设置，但产品中个性化配置项有限，本文介绍的扩展包方式适用更广范围。

如果您需要了解如何查找定位对应图片、css或js，便于扩展本文中没有涉及到的修改，见Smartbi前端框架介绍，调试定位入门等。

在客户的生产环境中部署 Smartbi 程序时，通常需要需要对其做一些简单的客户化定制，比如替换登录界面、以及主界面顶部的LOGO和图片、或者修改程序名称标识等。如果您遇到类似需求，请参考下面的步骤修改和部署 ChangeLogo 扩展包。

注意

title	注意事项

所有第三方对smartbi的修改，必须放在扩展包中，不能直接修改war包里面的文件。

更多关于产品的OEM定制，譬如移动端换logo请见：移动端自定义logo扩展包

修改扩展包

扩展包修改方法

请首先下载 ChangeLogo 扩展包，下载地址：ChangeLogo.ext （此扩展包适用于V11以上版本）。如果需要修改其中的某个文件，请参照如下步骤进行。

首先用 WinRAR 之类的压缩工具，打开 ChangeLogo.ext 文件。
然后将需要修改的文件从 WinRAR 窗口中拖出来，对其进行修改。
接着将修改后的文件，拖放回 WinRAR 窗口中，覆盖以前的旧文件。
关闭 WinRAR 窗口保存修改即可。

浏览器标题栏title

修改浏览器标题栏上显示的名称，对应的文件路径是：ChangeLogo.ext\vision\js\ext\ConfigurationPatch.js。其中 loginTitle 是登录界面的标题、configTitle是配置界面的标题。

注意：当标题栏title出现乱码时，是由于该JS文件编码格式不对，

请采用UTF-8编码格式，将文件编码格式改成UTF-8，最简单的方式是使用Uedit工具打开ConfigurationPatch.js 文件，将文件另存为UTF-8文件，使用转码后文件即可。

登录界面LOGO

登录界面的图片文件路径是：ChangeLogo.ext\vision\img\login\logo.png 。直接将项目上所用的 LOGO 文件拖放到对应路径中，覆盖同名文件即可。

信息
注意！如果是替换图片，则要求图片文件的名称、扩展名、图片的大小尺寸必须完全一致。

主界面、Config配置界面和仪表盘界面logo

Smartbi 主界面的顶部logo文件、Config配置界面和仪表盘界面logo是同一个：

大LOGO路径是：ChangeLogo.ext\vision\img\baseframe\logo.png，尺寸为180*40

小LOGO路径是：ChangeLogo.ext\vision\img\baseframe\logo-light.png，尺寸为198*33

更改主页面最顶端的颜色，对应的文件路径为ChangeLogo.ext\vision\css\patch.css，修改background-color参数，如background-color:#0000ff;

Config登录界面

LOGO路径是：ChangeLogo.ext\vision\img\config-login-logo.png，尺寸为183*23

Config页面左上角图标

LOGO路径是：ChangeLogo.ext\vision\img\mainframe\logo.png，尺寸为230*52

屏蔽右上角图标

系统右上角的功能图标入口

用户可以根据需求进行屏蔽和释放，通过修改文件“BannerView.js.patch”中的代码实现。

该文件对应的路径是：ChangeLogo.ext\vision\js\bof\baseajax\common。

修改定制详情如下表：

修改内容

修改详情

搜索图标（）

找到如下代码：

// 'SEARCH',

将这段代码的注释取消则屏蔽了“搜索”图标。

导航页图标（Image RemovedImage Added）

找到如下代码：

// 'GUIDE_PAGE',

将这段代码的注释取消则屏蔽了“导航页”图标。

代办图标（）

找到如下代码：

// 'TODO_LIST',

将这段代码的注释取消则屏蔽了“导航页”图标。

消息中心图标（）

找到如下代码：

// 'MESSAGE_CENTER',

将这段代码的注释取消则屏蔽了“导航页”图标。

管理员

找到如下代码：

// 'LOGIN_USER'

将这段代码的注释取消则屏蔽了“管理员”。

屏蔽右上角更多下拉框菜单

用户可以根据需求进行屏蔽和释放，通过修改文件“BannerMoreMenusDialog.js.patch”中的代码实现。

该文件对应的路径是：ChangeLogo.ext\vision\js\bof\baseajax\common\dialog。

修改定制详情如下表：

修改内容

修改详情

帮助文档

找到如下代码：

// 'ONLINE_HELP',

将这段代码的注释取消则屏蔽了“帮助文档”列。

用户日志

找到如下代码：

// 'USER_LOGS',

将这段代码的注释取消则屏蔽了“用户日志”列。

系统监控

找到如下代码：

// 'SYS_MONITOR',

将这段代码的注释取消则屏蔽了“系统监控”列。

登录二维码

找到如下代码：

// 'QRCode',

将这段代码的注释取消则屏蔽了“登录二维码”列。

插件下载

找到如下代码：

// 'PLUGIN_DOWNLOAD',

将这段代码的注释取消则屏蔽了“插件下载”列。

关于

找到如下代码：

// 'ABOUT_SMARTBI',

将这段代码的注释取消则屏蔽了“关于”列。

注销

找到如下代码：

// 'LOGOUT'

将这段代码的注释取消则屏蔽了“注销”列。

关于页面信息

Smartbi “关于”对话框上的图片LOGO、公司名称、网站等信息的修改。

图片LOGO文件对应路径是：ChangeLogo.ext\vision\img\about\logo.png
麦粉社区、版本发布说明：扩展包会隐藏这一行信息，不支持修改。
“关于 Smartbi” 标识：

编辑 ChangeLogo.ext\META-INF 目录下的下图中的这 3 个文件，分别在这 3 个文件中填写英文、中文、繁体 3 种语言的标识，填写规则为增加两行，分别为 UpperProduceName=标识和 LowerProduceName=标识。

标识包含非英文字符时，需要转为 unicode 编码，例如标识为 “Smartbi思迈特” 转为 unicode 编码为 “smartbi\u601d\u8fc8\u7279”。将文件转为 unicode 编码可百度“unicode在线编码”，使用在线工具转换。

填写示例：标识为“思迈特公司”，则分别在这 3 个文件中填写以下内容：

extension_lang_en.properties （英文）：

UpperProduceName=SmartBI Company LowerProduceName=SmartBI Company

extension_lang_zh_CN.properties （中文）：

UpperProduceName=\u601D\u8FC8\u7279\u516C\u53F8

LowerProduceName=\u601D\u8FC8\u7279\u516C\u53F8

extension_lang_zh_TW.properties （繁体）：

UpperProduceName=\u601D\u9081\u7279\u516C\u53F8

LowerProduceName=\u601D\u9081\u7279\u516C\u53F8

更新扩展包后，可以看到在不同语言环境下显示的标识分别为上方编写的英文、中文、繁体：

公司名称：同上，修改中、英、繁配置文件，分别增加一行 Smartbi=公司名称。
公司官网：同上，修改中、英、繁配置文件，分别增加一行 WebAddress=官网地址。

联系邮箱：同上，修改中、英、繁配置文件，分别增加一行 ContactusEmail=邮箱地址。

隐藏导航页的帮助，社区，官网，在线咨询列表

用户可以根据需求进行屏蔽和释放

该文件对应的路径是：ChangeLogo.ext\vision\js\freequery\mycenter\MyCenter.js.patch，ChangeLogo.ext\vision\js\smartbi\baseframe\module\navigationpage\NavigationPageTaskPanel.js.patch。

屏蔽搜索弹窗的帮助文档列和麦粉社区列

用户可以根据需求进行屏蔽和释放

该文件对应的路径是：ChangeLogo.ext\vision\js\bof\baseajax\common\dialog\SearchDialog.js.patch。

下图中扩展包默认的代码为屏蔽帮助文档和麦粉社区：

将该文件的内容替换为以下内容，则搜索弹框会显示内部资源、帮助文档、麦粉社区这 3 列：

代码块

language	js
firstline	1
linenumbers	true

SearchDialog.prototype.getAction_oem = SearchDialog.prototype.getAction;
SearchDialog.prototype.getAction = function() {
  var action = this.getAction_oem();
  var actionIds = ['innerResource', 'helpDocument', 'forum'];
  action = action.filter(e => actionIds.includes(e.id));
  return action;
}

其中第 4 行的 3 个 id 分别代表：

innerResource：内部资源

helpDocument：帮助文档

forum：麦粉社区

可修改第 4 行的代码，去除不需要的列 id。

例如只需要显示内部资源，可修改为：

代码块

language	js

var actionIds = ['innerResource'];

例如只需要显示内部资源和麦粉社区，可修改为：

代码块

language	js

var actionIds = ['innerResource', 'forum'];

自定义登录界面

我们参照“1.3 登录界面图片”章节的方法，可以替换登录界面上的图片，但这在很多时候无法满足要求，客户希望把整个登录界面完全换成另外一种风格。针对此需求，可以参照如下步骤操作。

编写登录界面的 jsp 文件。可以参考 ChangeLogo.ext\vision\login_demo.jsp 示例文件，其中 javascript 代码的登录逻辑部分可以不用修改（直接拷贝使用），该文件的其余部分可以任意修改，把界面修改为客户所要求的设计风格。

代码块

language	js
linenumbers	true
collapse	true

<script type="text/javascript" src="js/freequery/lang/JSLoader.js"></script>
<script>
	<!-- 以下代码为登录 Smartbi 的处理逻辑，可直接拷贝使用 -->
	<!-- 直接修改 document.getElementById("user") 等代码段即可 -->
	var jsloader = new JSLoader();
	var util = jsloader.resolve("freequery.common.util");
	document.onkeydown = keydown;
	function init() {
		var userName = document.getElementById("user");
		if (userName)
			userName.focus();
	}
	
	function login() {
		var userName = document.getElementById("user"); //用户名输入框ID修改为实际HTML中的元素ID
		var password = document.getElementById("password"); //密码输入框ID修改为实际HTML中的元素ID
		var ret = util.remoteInvokeEx("UserService", "login", [userName.value, password.value]); //调用Smartbi登录方法
		
		if (!ret || !ret.result){
			alert("登录失败!");
			return;	
		} else {
			window.location.reload();
		}
	}
	
	function keydown(e) {
        var theEvent = e || window.event;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;    
        if (code == 13) {
            login();
        }    
	}
	<!--------------------->
</script>

增加登录界面 jsp 文件配置项。对应的配置文件路径是：ChangeLogo.ext\vision\js\ext\ConfigurationPatch.js，将其中的 loginJspPath 属性值改为登录界面 jsp 文件路径。注意：此路径为相对于smartbi.war/vision/ 的路径。

其它说明：

系统统一访问入口仍然为 http://localhost:18080/smartbi/vision/index.jsp；访问 Smartbi 时如果用户未登录，会自动跳转到 login_demo.jsp 页面中。
此登录界面的处理逻辑为：点击“登录”按钮时，调用 smartbi 的登录API进行登录，再重新刷新本页面。

自定义登录界面示例：

试用版水印修改

修改插件包ChangeLogo\vision\js\ext\路径下的ConfigurationPatch.js文件，配置项说明如下：

waterMarkName：试用版水印标题

帮助文档指定对应的访问地址

修改插件包ChangeLogo\vision\js\ext\路径下的ConfigurationPatch.js文件，配置项说明如下：

onlineHelpAddressConfig：自定义帮助文档跳转地址

部署扩展包

根据项目上的客户化定制需求，修改完 ChangeLogo 扩展包后，需要将其部署系统中。完整的部署过程和操作步骤，请参考扩展包部署。

面板

borderColor	#BBBBBB
bgColor	#F0F0F0
borderWidth	1
borderStyle	solid

目录

由于很多客户对Logo文字，图片等有较多个性化需求，我们就在产品中增加了界面设置，但产品中个性化配置项有限，本文介绍的扩展包方式适用更广范围。

如果您需要了解如何查找定位对应图片、css或js，便于扩展本文中没有涉及到的修改，见Smartbi前端框架介绍，调试定位入门等。

在客户的生产环境中部署 Smartbi 程序时，通常需要需要对其做一些简单的客户化定制，比如替换登录界面、以及主界面顶部的LOGO和图片、或者修改程序名称标识等。如果您遇到类似需求，请参考下面的步骤修改和部署 ChangeLogo 扩展包。

注意

title	注意事项

所有第三方对smartbi的修改，必须放在扩展包中，不能直接修改war包里面的文件。

更多关于产品的OEM定制，譬如移动端换logo请见：移动端自定义logo扩展包

修改扩展包修改扩展包

扩展包修改方法扩展包修改方法

请首先下载 ChangeLogo 扩展包，下载地址：请首先下载 ChangeLogo 扩展包，下载地址：ChangeLogo.extChangeLogo.ext （（此扩展包适用于V11以上版本此扩展包适用于V11以上版本）。如果需要修改其中的某个文件，请参照如下步骤进行。）。如果需要修改其中的某个文件，请参照如下步骤进行。

首先用首先用 WinRARWinRAR 之类的压缩工具，打开 ChangeLogo.ext 文件。之类的压缩工具，打开 ChangeLogo.ext 文件。
然后将需要修改的文件从 WinRAR 窗口中拖出来，对其进行修改。然后将需要修改的文件从 WinRAR 窗口中拖出来，对其进行修改。
接着将修改后的文件，拖放回 WinRAR 窗口中，覆盖以前的旧文件。接着将修改后的文件，拖放回 WinRAR 窗口中，覆盖以前的旧文件。
关闭 WinRAR 窗口保存修改即可。关闭 WinRAR 窗口保存修改即可。

浏览器标题栏title浏览器标题栏title

修改浏览器标题栏上显示的名称，对应的文件路径是：ChangeLogo.ext\vision\js\ext\ConfigurationPatch.js。其中 loginTitle 是登录界面的标题、configTitle是配置界面的标题。修改浏览器标题栏上显示的名称，对应的文件路径是：ChangeLogo.ext\vision\js\ext\ConfigurationPatch.js。其中 loginTitle 是登录界面的标题、configTitle是配置界面的标题。

Image Removed

注意：注意：当标题栏title出现乱码时，是由于该JS文件编码格式不对，当标题栏title出现乱码时，是由于该JS文件编码格式不对，

Image Removed

请采用UTF-8编码格式，将文件编码格式改成UTF-8，最简单的方式是使用Uedit工具打开ConfigurationPatch.js 文件，将文件另存为UTF-8文件，使用转码后文件即可。请采用UTF-8编码格式，将文件编码格式改成UTF-8，最简单的方式是使用Uedit工具打开ConfigurationPatch.js 文件，将文件另存为UTF-8文件，使用转码后文件即可。

Image Removed

登录界面LOGO登录界面LOGO

登录界面的图片文件路径是：ChangeLogo.ext\vision\img\login\logo.png 。直接将项目上所用的 LOGO 文件拖放到对应路径中，覆盖同名文件即可。登录界面的图片文件路径是：ChangeLogo.ext\vision\img\login\logo.png 。直接将项目上所用的 LOGO 文件拖放到对应路径中，覆盖同名文件即可。

Image Removed

信息
注意！如果是替换图片，则要求图片文件的名称、扩展名、图片的大小尺寸必须完全一致。注意！如果是替换图片，则要求图片文件的名称、扩展名、图片的大小尺寸必须完全一致。

主界面、Config配置界面和仪表盘界面logo主界面、Config配置界面和仪表盘界面logo

Smartbi 主界面的顶部logo文件、Config配置界面和仪表盘界面logo是同一个：Smartbi 主界面的顶部logo文件、Config配置界面和仪表盘界面logo是同一个：

大LOGO路径是：ChangeLogo.ext\vision\img\baseframe\logo.png，尺寸为180*40大LOGO路径是：ChangeLogo.ext\vision\img\baseframe\logo.png，尺寸为180*40

小LOGO路径是：ChangeLogo.ext\vision\img\baseframe\logo-light.png，尺寸为198*33小LOGO路径是：ChangeLogo.ext\vision\img\baseframe\logo-light.png，尺寸为198*33

Image Removed

更改主页面最顶端的颜色，对应的文件路径为ChangeLogo.ext\vision\css\patch.css，修改background-color参数，如background-color:#0000ff;更改主页面最顶端的颜色，对应的文件路径为ChangeLogo.ext\vision\css\patch.css，修改background-color参数，如background-color:#0000ff;

Image Removed

Config登录界面Config登录界面

LOGO路径是：ChangeLogo.ext\vision\img\config-login-logo.png，尺寸为183*23LOGO路径是：ChangeLogo.ext\vision\img\config-login-logo.png，尺寸为183*23

Image Removed

Config页面左上角图标Config页面左上角图标

LOGO路径是：ChangeLogo.ext\vision\img\mainframe\logo.png，尺寸为230*52LOGO路径是：ChangeLogo.ext\vision\img\mainframe\logo.png，尺寸为230*52

Image Removed

屏蔽右上角图标屏蔽右上角图标

系统右上角的功能图标入口系统右上角的功能图标入口

Image Removed

用户可以根据需求进行屏蔽和释放，通过修改文件“BannerView.js.patch”中的代码实现。用户可以根据需求进行屏蔽和释放，通过修改文件“BannerView.js.patch”中的代码实现。

该文件对应的路径是：ChangeLogo.ext\vision\js\bof\baseajax\common。该文件对应的路径是：ChangeLogo.ext\vision\js\bof\baseajax\common。

修改定制详情如下表：修改定制详情如下表：

修改内容修改内容修改详情修改详情

搜索图标（搜索图标（Image Removed））

找到如下代码：找到如下代码：

// 'SEARCH',// 'SEARCH',

将这段代码的注释取消则屏蔽了“搜索”图标。将这段代码的注释取消则屏蔽了“搜索”图标。

导航页图标（导航页图标（Image Removed））

找到如下代码：找到如下代码：

// 'GUIDE_PAGE',// 'GUIDE_PAGE',

将这段代码的注释取消则屏蔽了“导航页”图标。将这段代码的注释取消则屏蔽了“导航页”图标。

代办图标（代办图标（Image Removed））

找到如下代码：找到如下代码：

// 'TODO_LIST',// 'TODO_LIST',

将这段代码的注释取消则屏蔽了“导航页”图标。将这段代码的注释取消则屏蔽了“导航页”图标。

消息中心图标（消息中心图标（Image Removed））

找到如下代码：找到如下代码：

// 'MESSAGE_CENTER',// 'MESSAGE_CENTER',

将这段代码的注释取消则屏蔽了“导航页”图标。将这段代码的注释取消则屏蔽了“导航页”图标。

管理员管理员

找到如下代码：找到如下代码：

// 'LOGIN_USER'// 'LOGIN_USER'

将这段代码的注释取消则屏蔽了“管理员”。将这段代码的注释取消则屏蔽了“管理员”。

屏蔽右上角更多下拉框菜单屏蔽右上角更多下拉框菜单

Image Removed

用户可以根据需求进行屏蔽和释放，通过修改文件“BannerMoreMenusDialog.js.patch”中的代码实现。用户可以根据需求进行屏蔽和释放，通过修改文件“BannerMoreMenusDialog.js.patch”中的代码实现。

该文件对应的路径是：ChangeLogo.ext\vision\js\bof\baseajax\common\dialog。该文件对应的路径是：ChangeLogo.ext\vision\js\bof\baseajax\common\dialog。

修改定制详情如下表：修改定制详情如下表：

修改内容修改内容修改详情修改详情帮助文档帮助文档

找到如下代码：找到如下代码：

// 'ONLINE_HELP',// 'ONLINE_HELP',

将这段代码的注释取消则屏蔽了“帮助文档”列。将这段代码的注释取消则屏蔽了“帮助文档”列。

用户日志用户日志

找到如下代码：找到如下代码：

// 'USER_LOGS',// 'USER_LOGS',

将这段代码的注释取消则屏蔽了“用户日志”列。将这段代码的注释取消则屏蔽了“用户日志”列。

系统监控系统监控

找到如下代码：找到如下代码：

// 'SYS_MONITOR',// 'SYS_MONITOR',

将这段代码的注释取消则屏蔽了“系统监控”列。将这段代码的注释取消则屏蔽了“系统监控”列。

登录二维码登录二维码

找到如下代码：找到如下代码：

// 'QRCode',// 'QRCode',

将这段代码的注释取消则屏蔽了“登录二维码”列。将这段代码的注释取消则屏蔽了“登录二维码”列。

插件下载插件下载

找到如下代码：找到如下代码：

// 'PLUGIN_DOWNLOAD',// 'PLUGIN_DOWNLOAD',

将这段代码的注释取消则屏蔽了“插件下载”列。将这段代码的注释取消则屏蔽了“插件下载”列。

关于关于

找到如下代码：找到如下代码：

// 'ABOUT_SMARTBI',// 'ABOUT_SMARTBI',

将这段代码的注释取消则屏蔽了“关于”列。将这段代码的注释取消则屏蔽了“关于”列。

注销注销

找到如下代码：找到如下代码：

// 'LOGOUT'// 'LOGOUT'

将这段代码的注释取消则屏蔽了“注销”列。将这段代码的注释取消则屏蔽了“注销”列。

关于页面信息关于页面信息

Smartbi “关于”对话框上的图片LOGO、公司名称、网站等信息的修改。Smartbi “关于”对话框上的图片LOGO、公司名称、网站等信息的修改。

图片LOGO文件对应路径是：ChangeLogo.ext\vision\img\about\logo.png图片LOGO文件对应路径是：ChangeLogo.ext\vision\img\about\logo.png
Image Removed
麦粉社区、版本发布说明：扩展包会隐藏这一行信息，不支持修改。麦粉社区、版本发布说明：扩展包会隐藏这一行信息，不支持修改。
“关于 Smartbi” 标识：“关于 Smartbi” 标识：

编辑 ChangeLogo.ext\META-INF 目录下的下图中的这 3 个文件，分别在这 3 个文件中填写英文、中文、繁体 3 种语言的标识，填写规则为增加两行，分别为 UpperProduceName=标识和 LowerProduceName=标识。编辑 ChangeLogo.ext\META-INF 目录下的下图中的这 3 个文件，分别在这 3 个文件中填写英文、中文、繁体 3 种语言的标识，填写规则为增加两行，分别为 UpperProduceName=标识和 LowerProduceName=标识。

标识包含非英文字符时，需要转为 unicode 编码，例如标识为 “Smartbi思迈特” 转为 unicode 编码为 “smartbi\u601d\u8fc8\u7279”。将文件转为 unicode 编码可百度“unicode在线编码”，使用在线工具转换。标识包含非英文字符时，需要转为 unicode 编码，例如标识为 “Smartbi思迈特” 转为 unicode 编码为 “smartbi\u601d\u8fc8\u7279”。将文件转为 unicode 编码可百度“unicode在线编码”，使用在线工具转换。

Image Removed

填写示例：标识为“思迈特公司”，则分别在这 3 个文件中填写以下内容：填写示例：标识为“思迈特公司”，则分别在这 3 个文件中填写以下内容：

extension_lang_en.properties （英文）：extension_lang_en.properties （英文）：

UpperProduceName=SmartBI CompanyUpperProduceName=SmartBI Company
LowerProduceName=SmartBI CompanyLowerProduceName=SmartBI Company

extension_lang_zh_CN.properties （中文）：extension_lang_zh_CN.properties （中文）：

UpperProduceName=\u601D\u8FC8\u7279\u516C\u53F8UpperProduceName=\u601D\u8FC8\u7279\u516C\u53F8

LowerProduceName=\u601D\u8FC8\u7279\u516C\u53F8LowerProduceName=\u601D\u8FC8\u7279\u516C\u53F8

extension_lang_zh_TW.properties （繁体）：extension_lang_zh_TW.properties （繁体）：

UpperProduceName=\u601D\u9081\u7279\u516C\u53F8UpperProduceName=\u601D\u9081\u7279\u516C\u53F8

LowerProduceName=\u601D\u9081\u7279\u516C\u53F8LowerProduceName=\u601D\u9081\u7279\u516C\u53F8

Image Removed

更新扩展包后，可以看到在不同语言环境下显示的标识分别为上方编写的英文、中文、繁体：更新扩展包后，可以看到在不同语言环境下显示的标识分别为上方编写的英文、中文、繁体：

Image Removed

公司名称：同上，修改中、英、繁配置文件，分别增加一行 Smartbi=公司名称。公司名称：同上，修改中、英、繁配置文件，分别增加一行 Smartbi=公司名称。
公司官网：同上，修改中、英、繁配置文件，分别增加一行 WebAddress=官网地址。公司官网：同上，修改中、英、繁配置文件，分别增加一行 WebAddress=官网地址。

联系邮箱：同上，修改中、英、繁配置文件，分别增加一行联系邮箱：同上，修改中、英、繁配置文件，分别增加一行 ContactusEmail=邮箱地址。ContactusEmail=邮箱地址。

隐藏导航页的帮助，社区，官网，在线咨询列表隐藏导航页的帮助，社区，官网，在线咨询列表

Image Removed

用户可以根据需求进行屏蔽和释放用户可以根据需求进行屏蔽和释放

该文件对应的路径是：ChangeLogo.ext\vision\js\freequery\mycenter\MyCenter.js.patch，ChangeLogo.ext\vision\js\smartbi\baseframe\module\navigationpage\NavigationPageTaskPanel.js.patch。该文件对应的路径是：ChangeLogo.ext\vision\js\freequery\mycenter\MyCenter.js.patch，ChangeLogo.ext\vision\js\smartbi\baseframe\module\navigationpage\NavigationPageTaskPanel.js.patch。

Image Removed

屏蔽搜索弹窗的帮助文档列和麦粉社区列屏蔽搜索弹窗的帮助文档列和麦粉社区列

Image Removed

用户可以根据需求进行屏蔽和释放用户可以根据需求进行屏蔽和释放

该文件对应的路径是：ChangeLogo.ext\vision\js\bof\baseajax\common\dialog\SearchDialog.js.patch。该文件对应的路径是：ChangeLogo.ext\vision\js\bof\baseajax\common\dialog\SearchDialog.js.patch。

下图中扩展包默认的代码为屏蔽帮助文档和麦粉社区：下图中扩展包默认的代码为屏蔽帮助文档和麦粉社区：

Image Removed

将该文件的内容替换为以下内容，则搜索弹框会显示内部资源、帮助文档、麦粉社区这 3 列：将该文件的内容替换为以下内容，则搜索弹框会显示内部资源、帮助文档、麦粉社区这 3 列：

代码块

language	js
firstline	1
linenumbers	true

SearchDialog.prototype.getAction_oem = SearchDialog.prototype.getAction;
SearchDialog.prototype.getAction = function() {
  var action = this.getAction_oem();
  var actionIds = ['innerResource', 'helpDocument', 'forum'];
  action = action.filter(e => actionIds.includes(e.id));
  return action;
}SearchDialog.prototype.getAction_oem = SearchDialog.prototype.getAction;
SearchDialog.prototype.getAction = function() {
  var action = this.getAction_oem();
  var actionIds = ['innerResource', 'helpDocument', 'forum'];
  action = action.filter(e => actionIds.includes(e.id));
  return action;
}

其中第 4 行的 3 个 id 分别代表：其中第 4 行的 3 个 id 分别代表：

innerResource：内部资源 innerResource：内部资源

helpDocument：帮助文档 helpDocument：帮助文档

forum：麦粉社区 forum：麦粉社区

可修改第 4 行的代码，去除不需要的列 id。可修改第 4 行的代码，去除不需要的列 id。

例如只需要显示内部资源，可修改为：例如只需要显示内部资源，可修改为：

代码块

language	js

var actionIds = ['innerResource'];var actionIds = ['innerResource'];

例如只需要显示内部资源和麦粉社区，可修改为：例如只需要显示内部资源和麦粉社区，可修改为：

代码块

language	js

var actionIds = ['innerResource', 'forum'];var actionIds = ['innerResource', 'forum'];

自定义登录界面自定义登录界面

我们参照“我们参照“1.3 登录界面图片1.3 登录界面图片”章节的方法，可以替换登录界面上的图片，但这在很多时候无法满足要求，客户希望把整个登录界面完全换成另外一种风格。针对此需求，可以参照如下步骤操作。”章节的方法，可以替换登录界面上的图片，但这在很多时候无法满足要求，客户希望把整个登录界面完全换成另外一种风格。针对此需求，可以参照如下步骤操作。

编写登录界面的 jsp 文件。可以参考 ChangeLogo.ext\vision\login_demo.jsp 示例文件，其中 javascript 代码的登录逻辑部分可以不用修改（直接拷贝使用），该文件的其余部分可以任意修改，把界面修改为客户所要求的设计风格。编写登录界面的 jsp 文件。可以参考 ChangeLogo.ext\vision\login_demo.jsp 示例文件，其中 javascript 代码的登录逻辑部分可以不用修改（直接拷贝使用），该文件的其余部分可以任意修改，把界面修改为客户所要求的设计风格。

代码块

language	js
linenumbers	true
collapse	true

<script type="text/javascript" src="js/freequery/lang/JSLoader.js"></script>
<script>
	<!-- 以下代码为登录 Smartbi 的处理逻辑，可直接拷贝使用 -->
	<!-- 直接修改 document.getElementById("user") 等代码段即可 -->
	var jsloader = new JSLoader();
	var util = jsloader.resolve("freequery.common.util");
	document.onkeydown = keydown;
	function init() {
		var userName = document.getElementById("user");
		if (userName)
			userName.focus();
	}
	
	function login() {
		var userName = document.getElementById("user"); //用户名输入框ID修改为实际HTML中的元素ID
		var password = document.getElementById("password"); //密码输入框ID修改为实际HTML中的元素ID
		var ret = util.remoteInvokeEx("UserService", "login", [userName.value, password.value]); //调用Smartbi登录方法
		
		if (!ret || !ret.result){
			alert("登录失败!");
			return;	
		} else {
			window.location.reload();
		}
	}
	
	function keydown(e) {
        var theEvent = e || window.event;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;    
        if (code == 13) {
            login();
        }    
	}
	<!--------------------->
</script><script type="text/javascript" src="js/freequery/lang/JSLoader.js"></script>
<script>
	<!-- 以下代码为登录 Smartbi 的处理逻辑，可直接拷贝使用 -->
	<!-- 直接修改 document.getElementById("user") 等代码段即可 -->
	var jsloader = new JSLoader();
	var util = jsloader.resolve("freequery.common.util");
	document.onkeydown = keydown;
	function init() {
		var userName = document.getElementById("user");
		if (userName)
			userName.focus();
	}
	
	function login() {
		var userName = document.getElementById("user"); //用户名输入框ID修改为实际HTML中的元素ID
		var password = document.getElementById("password"); //密码输入框ID修改为实际HTML中的元素ID
		var ret = util.remoteInvokeEx("UserService", "login", [userName.value, password.value]); //调用Smartbi登录方法
		
		if (!ret || !ret.result){
			alert("登录失败!");
			return;	
		} else {
			window.location.reload();
		}
	}
	
	function keydown(e) {
        var theEvent = e || window.event;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;    
        if (code == 13) {
            login();
        }    
	}
	<!--------------------->
</script>

增加登录界面 jsp 文件配置项。对应的配置文件路径是：ChangeLogo.ext\vision\js\ext\ConfigurationPatch.js，将其中的 loginJspPath 属性值改为登录界面 jsp 文件路径。注意：此路径为相对于增加登录界面 jsp 文件配置项。对应的配置文件路径是：ChangeLogo.ext\vision\js\ext\ConfigurationPatch.js，将其中的 loginJspPath 属性值改为登录界面 jsp 文件路径。注意：此路径为相对于smartbi.war/vision/smartbi.war/vision/ 的路径。的路径。

Image Removed

其它说明：其它说明：

系统统一访问入口仍然为系统统一访问入口仍然为 http://localhost:18080/smartbi/vision/index.jsp；访问http://localhost:18080/smartbi/vision/index.jsp；访问 Smartbi 时如果用户未登录，会自动跳转到 login_demo.jsp 页面中。 Smartbi 时如果用户未登录，会自动跳转到 login_demo.jsp 页面中。

此登录界面的处理逻辑为：点击“此登录界面的处理逻辑为：点击“登录登录”按钮时，调用 smartbi 的登录API进行登录，再重新刷新本页面。”按钮时，调用 smartbi 的登录API进行登录，再重新刷新本页面。

自定义登录界面示例：自定义登录界面示例：

Image Removed

试用版水印修改试用版水印修改

修改插件包ChangeLogo\vision\js\ext\路径下的ConfigurationPatch.js文件，配置项说明如下：修改插件包ChangeLogo\vision\js\ext\路径下的ConfigurationPatch.js文件，配置项说明如下：

waterMarkNamewaterMarkName：试用版水印标题：试用版水印标题

Image Removed

帮助文档指定帮助文档指定对应的访问地址对应的访问地址

修改插件包ChangeLogo\vision\js\ext\路径下的ConfigurationPatch.js文件，配置项说明如下：修改插件包ChangeLogo\vision\js\ext\路径下的ConfigurationPatch.js文件，配置项说明如下：

onlineHelpAddressConfigonlineHelpAddressConfig：自定义帮助文档跳转地址：自定义帮助文档跳转地址

Image Removed

部署扩展包部署扩展包

根据项目上的客户化定制需求，修改完 ChangeLogo 扩展包后，需要将其部署系统中。完整的部署过程和操作步骤，请参考根据项目上的客户化定制需求，修改完 ChangeLogo 扩展包后，需要将其部署系统中。完整的部署过程和操作步骤，请参考扩展包部署扩展包部署。。

面板

borderColor	#BBBBBB
bgColor	#F0F0F0
borderWidth	1
borderStyle	solid

目录

由于很多客户对Logo文字，图片等有较多个性化需求，我们就在产品中增加了界面设置，但产品中个性化配置项有限，本文介绍的扩展包方式适用更广范围。

如果您需要了解如何查找定位对应图片、css或js，便于扩展本文中没有涉及到的修改，见Smartbi前端框架介绍，调试定位入门等。

在客户的生产环境中部署 Smartbi 程序时，通常需要需要对其做一些简单的客户化定制，比如替换登录界面、以及主界面顶部的LOGO和图片、或者修改程序名称标识等。如果您遇到类似需求，请参考下面的步骤修改和部署 ChangeLogo 扩展包。

注意

title	注意事项

所有第三方对smartbi的修改，必须放在扩展包中，不能直接修改war包里面的文件。

更多关于产品的OEM定制，譬如移动端换logo请见：移动端自定义logo扩展包

Image Removed

信息

Image Removed

代码块

language	js
firstline	1
linenumbers	true

代码块

language	js

代码块

language	js

代码块

language	js
linenumbers	true
collapse	true

Image Removed

页面树结构

版本比较

旧版本 31

新版本 32

标识

修改扩展包

扩展包修改方法

浏览器标题栏title

登录界面LOGO

主界面、Config配置界面和仪表盘界面logo

Config登录界面

Config页面左上角图标

屏蔽右上角图标

屏蔽右上角更多下拉框菜单

关于页面信息

隐藏导航页的帮助，社区，官网，在线咨询列表

屏蔽搜索弹窗的帮助文档列和麦粉社区列

自定义登录界面

试用版水印修改

帮助文档指定对应的访问地址

部署扩展包

修改扩展包修改扩展包

扩展包修改方法扩展包修改方法

浏览器标题栏title浏览器标题栏title

登录界面LOGO登录界面LOGO

主界面、Config配置界面和仪表盘界面logo主界面、Config配置界面和仪表盘界面logo

Config登录界面Config登录界面

Config页面左上角图标Config页面左上角图标

屏蔽右上角图标屏蔽右上角图标

屏蔽右上角更多下拉框菜单屏蔽右上角更多下拉框菜单

关于页面信息关于页面信息

隐藏导航页的帮助，社区，官网，在线咨询列表隐藏导航页的帮助，社区，官网，在线咨询列表

屏蔽搜索弹窗的帮助文档列和麦粉社区列屏蔽搜索弹窗的帮助文档列和麦粉社区列

自定义登录界面自定义登录界面

试用版水印修改试用版水印修改

帮助文档指定帮助文档指定对应的访问地址对应的访问地址

部署扩展包部署扩展包