Customizing homepage |
SuperMap iPortal administrator can customize the homepage contents, adjust the layout of the UI components on the home page and customize the UI components according to the portal's business requirements.
The customization of portal homepage contents includes: general content, navigation settings, carousel settings, shortcut links, hot map, newest services, etc. You can also modify the CSS file to customize theme style, modify the js file to customize page title.
Log into portal home page as an administrator- > management - > site configuration, selecting the "home page custom" tab, entering the home page custom page to customize the following contents:
You can set the portal's Logo, site name, copyright information, and whether to display a link to the Help document. After the setting, you can click the Preview button to see the display effect. You can click the Save button to save the information and publish it. If you want to display and hide of the copyright information , you can set it in the visual layout system.
After the setting, you can click the Preview button to see the display effect. You can click the Save button to save the information and publish it.
For how to add Develop Center in the navigation bar, please refer to Sample 1: Customize and Add Develop Center Navigation Bar。
After the setting, you can click the Preview button to see the display effect. You can click the Save button to save the information and publish it.
You can quickly enter the corresponding function module page by clicking the shortcut link button.
After the setting, you can click the Preview button to see the display effect. You can click the Save button to save the information and publish it.
Hots maps refer to maps with high access visits.
After the setting, you can click the Preview button to see the display effect. You can click the Save button to save the information and publish it.
Latest services refer to the newly registered services.
After the setting, you can click the Preview button to see the display effect. You can click the Save button to save the information and publish it.
To implement a custom theme to meet your needs, you can edit the homeConfig_zh_CN.css or homeConfig_en_US.css under [SuperMap iPortal install directory] \webapps\iportal\WEB-INF\config directory.
You could modify the files: iportalConfig_zh_CN.js（Chinese）and iportalConfig_en_US.js（English）under: %SuperMap iPortal_HOME%\webapps\iportal\WEB-INF\config to configurate the title of homepage, user login, user manual, map, service, application and My Content. title，Default configuration:
Title.index = "Homepage";
Title.maps = "Map";
Title.services = "Service";
Title.apps = "Application";
Title.groups = "Group";
Title.register = "User register";
Title.login = "User login";
Title.mycontent = Title.mycontent || {};
Title.mycontent.maps = "My map";
Title.mycontent.services = "My service";
Title.mycontent.scenes = "My scene";
Title.mycontent.datas = "My data";
Title.mycontent.account = "My account";
Title.mycontent.message = "My information";
Title.users = Title.users || {};
Title.users.resetpwd = "Password reset";
Title.services = Title.services || {};
Title.services.register = "Register service";
Refresh page after modification, then it works.
Sample: Modify homepage title to "guotuyun", others unchanged, configuration:
Title.index = "Guotuyun";
Title.maps = "Map";
Title.services = "Service";
Title.apps = "Application";
Title.groups = "Gruop";
Title.register = "User register";
Title.login = "User login";
Title.mycontent = Title.mycontent || {};
Title.mycontent.maps = "My map";
Title.mycontent.services = "My service";
Title.mycontent.scenes = "My scene";
Title.mycontent.datas = "My data";
Title.mycontent.account = "My account";
Title.mycontent.message = "My information";
Title.users = Title.users || {};
Title.users.resetpwd = "Password reset";
Title.services = Title.services || {};
Title.services.register = "Register service";
Refresh page after modification, then you will see the effect-"guotuyun" is instead of homepage title.
The visual layout system is primarily used to adjust the layout of UI components, and you can customize component contents according to business requirements. The entire layout system page is divided into three parts: Function Area, Layout Component Area, and UI Component Area.
The function area mainly includes: edit, preview, empty, save, publish functions.
iportalCustomHomePageTemplate.ftl file: The source code for the edit status of the layout system while publishing the home page.
Before you perform the UI component layout operation of the home page, you need to drag the layout components to the layout container on the right, and, of course, you can remove them from the layout container.
A layout component is a Bootstrap grid system that divides a row of the page. By default, a row can be divided up to 12 columns. An existing layout component provides: 1 row *1 column (12), 1 row * 2 columns (6 6), 1 row * 2 columns (8 4), 1 row * 3 columns (4 4 4), and custom layout component. Custom layout component allows you to arbitrarily split the number of columns and the width of columns in a custom layout component by entering an integer number combination, separated by spaces between numbers. When the summary of all numbers are 12, the component is valid.
You can drag the layout components of different rows and columns to the layout container on the right, depending on the page layout requirements.
If you have already dragged the layout component to the layout container on the right, then you need to drag the UI component to the appropriate layout component, and, of course, you can remove it from the layout component. You operations control which UI components are displayed on the home page.
UI components are concrete implementations of the interface UI, which can be divided into system-built components and custom components.
System built-in components include: navigation, carousel, shortcut links, hot maps, latest services, application recommendations, copyright information.
The component contents of the system's built-in components are determined by the specific settings of the home page content customization, and there can be only one system built-in component allowed in the layout container. The number of custom components are not limited.
The number and types of built-in UI components provided by the visual layout system if iPortal are limited and may not meet the customization needs of all users. Therefore, the system provides custom components allowing the highest degree of flexibility for advanced users.
Two edit modes are provided for custom UI components:
First you need drag a custom component into a layerout component, then click "Edit" on the custom component to enter visual edit mode. In this mode, you can use the basic editing function buttons provided by the editor to make text changes, typography, and insert of tables, pictures, videos, etc. You do not need to write front-end code. What you see is what you get.
In this mode, you possess the highest degree of customization permissions. When you enter the source code edit mode, you can customize the final UI effect of this component by using the front-end language of HTML, JavaScript, CSS, and so on.
About how to add custom components, please refer to: Example 2: Customizing and add E-map component.
If you need to modify the CSS style of the portal home page, you can create the iportalCustomHomePage.css file under the [SuperMap iPortal installation directory]\webapps\iportal\WEB-INF\classes\templates\css directory (if there is no classes\templates\css directory, please create one) and edit it to modify the home page CSS style.
For example, if you want to modify the shading color and height of the latest service components so that they are consistent with the hot map components, you can do this in three steps:
#latestServicesDiv {
background-color: rgb(247, 247, 247);
max-height: none;height: 338px;
}
Note:
If you want to restore the default home page CSS style, you only need to delete the iportalCustomHomePage.css file.
The English version of homepage customization content and the Chinese one are stored in two seperate files, both of them are independent. You can switch the website language by selecting the option in the drop-down list in the upper right corner of the management interface, then customize the homepage content for the Chinese or English version.