Skip to main content
Kinetic Community

Bundles v2

IDF guide rendered from cache
Bundles are web-based add ons to Kinetic Request which allow you to quickly create a web interface to your request catalog. Bundles include all of the files that you need to get started and come in different themes for styling and branding. A typical bundle includes a category listing page which allows the user to browse through the catalog, a display page for your service items, a submissions page which lists all the submitted, closed and pending requests for the user and a submission details page which shows all of the details and tasks for each request. Bundles are based on a web application framework and run in the same tomcat instance as Kinetic Request under the themes directory. Bundles consists of Java Server Pages, HTML, CSS, and JavaScript. Due to the fact that they are based on HTML and JSP pages they are easy to configure for your needs. View the KEG 2015 Presentation "Bundle Up with Themes"

Overview

The bundle is a directory structure and file system to support the Kinetic Request catalog through a web interface. The main purpose of the bundle is to manage the theming and branding, external user interfaces, and web administration.The main file types included are jsp, css and javascript files. The framework is built on Bootstrap, jQuery and Font Awesome.

The bundle contains several directories, but the main theming and branding is done through the common directory at the root of the theme directory. This contains all the images, css and javascript that is used across all packages and unifies the look and feel. Each package will have it’s own overriding / supplementing css and js files which are listed below.

All file paths in the following documentation are relative to the kinetic/themes/vattenfall directory.

Nomenclature

<config: keyname> - refers to a setting in /packages/catalog/config/config.jsp

bundle. - refers to the bundle object in Java. This object is built from the /core/framework/includes/bundleInitialization.jspf file and is added to from other jsp pages as needed. This object is available to all pages.

BUNDLE. - refers to the bundle object in javascript. This object is created from the java bundle object and is often added to or modified in the jsp pages. This object is available to all pages.

Structure

Bundles utilize a very structured configuration. Note this is the current/newer structure. There are a number of themes available bundles with a different structure that was used previously. If you have a theme/bundle in place from 2013-early 2015, it might be the structure documented here

Theme / branding / layout for the kinetic request application implementation.

common

Layout files used across the portal.

  • assets
    • css - Main css files used across the portal
    • fonts - Fonts used for typeface in the portal
    • images - Images used in the layout of the portal
    • js - Javascript files used across the portal
    • languages - Language translation files for the layout
    • config - Configuration files to run the portal. These are used to by java and javascript to create objects used throughout the portal (e.g. urls, template ids, helpers, etc.).
  • framework - Main java files for interaction with remedy or other data sources
    • helpers - Java code with commonly used methods for data manipulation
    • includes - Initialization files (loads all needed files to run the portal / bundle)
    • models - Java class files that expose methods for retrieving commonly used data
  • interface - JSP pages that output html to the browser
    • callbacks - JSP files that retrieve data and are used in ajax calls to return html or json
    • fragments - JSP files that are fragments of html included in the layout of the portal (e.g. header menus, search bar, user information, etc.).
    • layouts - The main JSP pages that pull all the fragments and content together and render the final output.
  • common.jsp - JSP page used to expose bridges and callbacks used commonly throughout the portal.

core

Core application files. These should not be modified.

libraries

Externally created library files (e.g. jQuery, moment,  etc.). These files can differ based on the customers’ implementation and can change as functionality is customized, added, or removed.

packages

Drop in modules of functionality. The service catalog package is included in all bundles.

  • catalog - Package for displaying an IT service catalog (e.g. request service items, view submissions, manage approvals, etc.). The jsp pages at this level are used to route to the layout and content that is displayed.
    • assets
      • css - Cascading style sheets used for the catalog package. Each content page will have it’s own css along with a file for overall package styles called package.css.
      • jsJavascript files used in the catalog package. Each content page will have it’s own javascript file along with a file for overall package functions called package.js
      • images - Images specifically used in the catalog package
      • languages - Language translation files for the catalog package content
    • config
      • config.jspf  - includes variable designations for java
      • config.json  - includes the information used by the portal and sibling packages to access information within this package.  It is also used to define internal links, descriptions, display names, etc.
    • framework - Java files for data retrieval and formatting
      • helpers - Java code with methods for data manipulation used specifically by this package
      • includes - Initialization files specifically used for this package (loads all needed files to run package)
      • models - Java class files that expose methods for retrieving data used specifically in this package
    • interface - JSP pages that output html to the browser
      • fragments - JSP files that are fragments of html used in the display of the package
      • layouts - (rarely used) - These layouts are used to override the main portal layout.
      • views -  The content displayed within the layout for each page. The view used is determined by a url parameter and the config.json
      • ajaxDescription.jsp – routing page for ajax calls to full page descriptions
      • approval.jsp – routing page for approvals
      • catalog.jsp – routing page for catalog pages
      • confirmation.jsp – routing page for confirmation of submitted service items
      • description.jsp – routing page for full page service item descriptions--review.jsp – routing page for submission review
      • reviewFrame.jsp – routing page for submission review viewed in iFrames
      • reviewPageTab.jsp – routing page for submission review for multipage submissions
      • service.jsp – routing page for service item forms
      • serviceFrame.jsp – routing page for service item forms viewed in iFrames

setup

  • kurlKurl is a Kinetic Data created java utility used to export and import Kinetic Request catalogs - http://community.kineticdata.com/10_...c_Request/KURL . The kurl files in this directory are the base setup files to start the catalog. NOTE: These files are not the modified files for your particular catalog, only the base files needed to run the bundle.
  • toolsThe following are optional tools to manage the bundle code. The included tools were used to create the initial css and install the various libraries. Use of these tools are not required to customize the bundle code.

Standard Bundle Page Flow

bundle-flow.png

Configuration Files

config.json

The configuration for each package is maintained in the config.json file in the package’s /config directory. When a page is loaded all the config.json files are read and processed so that links, callbacks, etc. are available across packages. The objects are added to the javascript BUNDLE object. BUNDLE main configuration is available in BUNDLE.config, current package configuration is available in BUNDLE.package and all packages’ configurations are available in BUNDLE.packages.

package: The package name
languages: Object of country code : language display name (e.g. de_DE : Deustch) for the languages this package is translated into.
views: {
Associates a file and page title to a view. This key is passed in the url and used by the router jsp to load the proper content within the layout.
    <key>: {
        content : the path to the file to be loaded,
        
title: page title
}
callbacks: {
Associates a key with files used to load/submit content through an ajax call
    
<key>: {
        content: path to the file
    
}
}
searchConfig:{
Configuration for header search
    
displayName: The display name for url (e.g. DisplayPage?name=<displayName>),
    
params: parameters to be added to the query string (e.g. DisplayPage?name=<displayName>&<parameter>=<value>)
    placeholder: the text to display as a placeholder in the search input
}
links: {
    
type: a key to be used for placing the links (e.g. main-menu, footer, etc.)
    label: Wording that is shown on the tab/link
    class: Class added to the tab/link for targeting
    description: alt tag/title/tooltip text
    icon: Font Awesome class for icon to use on tab/link
    displayName: The display name for url (e.g. DisplayPage?name=<displayName>)
    params: parameters to be added to the query string (e.g. DisplayPage?name=<displayName>&<parameter>=<value>)
    order: The numerical order for this tab/link
}

config.jsp

Sets miscellaneous java variables for the specific package.

Common

Common files are used to create the visible portions of the portal that are used on every portal page and form. They also preload data for global use and some of this common data is stored in the browser session.

Initialization files

/common/framework/includes/commonInitialization.jspf

This file is responsible for initializing the common framework.  It is loaded by the core bundleInitialization.jspf file (which is responsible for initializing the bundle framework).  It loads the common configuration file and any present helpers or models. This file will need to be modified if there are any helper or model classes that are added to common.

/common/framework/includes/languageInitialization.jspf

This file is responsible for initializing the language files for translations. This file should not be modified.

/common/framework/includes/redirectIfLoggedIn.jspf

This file will send an HTTP (302) Found redirection response if there is a context associated with the request (indicating the user is presently logged in).  It is frequently included by login pages so that the user is never returned to the login page after they have logged in.

Header

The header includes the logo, search bar, links to all the pages in the portal and the user information / links. The tabs and links come from an aggregation of the the config.json files in each package. The menus and links are defined under the “links” json object and uses “type” to specify where the links are shown.

link types: main-menu

files:

/common/interface/fragments/header.jsp
/common/interface/fragments/contentUser.jsp
/common/interface/fragments/logo.jsp
/common/interface/fragments/mainMenu.jsp
/common/interface/fragments/portalSearchForm.jsp

Footer

The footer includes link for about and site feedback.

link types: footer

files:

/common/interface/fragments/footer.jsp

Layout

These files are the main formatting pages that include the html head files, header, footer, and pull in the content based on the url view parameter. These layouts can be overwritten by the package layout files.

 

files:

/common/interface/layouts/layout.jsp
/common/interface/layouts/layoutFrame.jsp (does not include header and footer - is usually used within an iFrame or pop-up.)
/common/interface/layouts/login.jsp

Core

The files in this directory are used for Kinetic Request and should not be modified.

Packages

Portal pages are the main landing pages of the web interface and are usually driven by a package in the bundle. Packages typically require at least one "portal" type service item in the catalog pointing to its JSP page. These service items are usually blank but do have several configuration options to make them work properly in the bundle. Refer to your bundle's or package's read.me page for the configurations necessary.

The following packages are typical to bundles.

For additional packages refer to Bundle Packages at http://community.kineticdata.com/10_Kinetic_Request/Resources/Bundle_Packages

Catalog 

The catalog package is used to show categories and associated request items that allows the user to browse through the catalog. Categories are configured in Kinetic Request by modifying the catalog and adding them under the "Service Item Categories" tab. Once the categories are added they are available to add to your service items in the "Settings" tab under "Attributes" then "Category". Categories will not typically appear on the catalog page until a service item is associated with a category.

 

Available Bundles

Topics
  • Responsive is an out of the box Bundle solution for Kinetic Request. It contains the Responsive theme and a Kurl catalog. This theme contains the following portal pages: About This display page is used to render content through Request that can by dynamically managed. Catalog This display page is used to render catalog navigation. Popular Requests This display page is used to render popular requests based on submissions. Profile This display page is used to update the user's profile information and is accessed from clicking on the user's login name throughout the bundle. Search This display page is used to render search results from a catalog search. Service Item Example with Person Lookup Site Feedback Submissions and Submission Activity are included in the Catalog portal and do not have separate service items