Skip to main content
Kinetic Community

Adding a Mid-Tier Link to Calendar Details in Calendar 2.0

The overall look and feel of Kinetic Calendar 2.0 is managed through the use of “themes”.   A default theme is shipped with the application and gives it the “out-of-the-box” look.   If you want to change the color scheme or the default header, for example, the theme is where you would make those changes. Themes also allow you to add additional functionality such as a mid-tier link in an event’s details window.   The following article will demonstrate how to do this and provide some background on how to customize a theme to add additional functionality.

Sample Code

There is a file attached to this article named example.zip that contains files that will be referenced later in this article.  Download this file and extract it to your desktop.

Steps

Note:  The file location references in this article will assume that Kinetic Calendar is installed in a tomcat environment.  If you are using something other than tomcat, locate the kineticCalendar directory within your web server and all locations will be the same after that.
 
  1. Make a copy of the default theme that is shipped with Kinetic Calendar 2.0.  This theme is located in <tomcat_home>/webapps/kineticCalendar/themes/ and is simply named “default”.  You can name the new theme whatever you want.  For this article I will call my new theme “acme”.

 

  1. Go to the files that you downloaded and extracted from this article.  Copy the files and folders located in /example/themes/my_theme/ and paste them in the root of your new theme. For me, this would be directly inside the "acme" directory that I created in the previous step.  Choose to overwrite files/folders with the same name if prompted.
  2. Go to <tomcat_home>/webapps/kineticCalendar/themes/<your_theme>/config/ and open the config.jspf file in a text editor.  Specify the values for the following properties inside the file:
  • MIDTIER_WEB_SERVER (found on line 18) - this value should be the base URL of your mid-tier server.  An example of this value is "http://midtier.acme.com/arsys/"
  • MIDTIER_AR_SERVER (found on line 22) - this value should be the name of your Remedy AR Server.  An example of this value is "remedyprod".
  1. Update your calendar configuration files to use your new theme.  To do this, go to <tomcat_home>/webapps/kineticCalendar/WEB-INF/configuration/calendars/.  Inside this directory will be a series of directories that each represent a calendar in your environment. 

 

 

For this article we are going to modify one of the calendars that was installed with the application.  Open the directory named "incident_widespread".  Inside is a file named "calendar.json".  Open it with a text editor, and update the 'displayPage' property to point to your new directory and save the file.

 

 

There should also be a file named "et_events.json" in the same directory as the "calendar.json" file that you just modified.  Open it with a text editor and update the 'detailsPage' property to point to your new theme. 

 

 

  1. In step two above you copied files from the example.zip file to your new theme.  One of those files was a new jsp that is used to display the details of an incident event in a calendar.  It is called "incident_event.jsp".  This jsp file also adds the link to launch mid-tier and view the incident that you selected from the calendar.  This file was placed inside the root of your new theme.  Update the 'detailsPage' property of the same "et_events.json" file that you modified in the previous step to use this new jsp.

 

 

  1. All that is left is to restart your tomcat instance so the new files and the changes are picked up.  From there you should see a link at the bottom of the incident details window.

How Does it Work

Now that you've implemented the steps and seen what the outcome is, let's go back and see how this worked.

After duplicating the default theme, you imported a few files into it.  One of the files was named "config.jspf" and it was placed into your theme's "config" directory, replacing the existing one.  This file is a place where you can define properties that can be used by calendars that use this theme.  The new version of this file that you imported contained a few new properties.  Here is the new code for those properties:


    /** Mid-Tier web server URL */
    theme.setProperty("MIDTIER_WEB_SERVER", "http://midtier.mycompany.com:8080/arsys/");

    /** AR Server Name */
    theme.setProperty("MIDTIER_AR_SERVER", "arservername");

    /** Helper for the View Form Servlet */
    theme.setProperty("MIDTIER_FORM_SERVLET",
            theme.getProperty("MIDTIER_WEB_SERVER") +
            "servlet/ViewFormServlet?server=" + theme.getProperty("MIDTIER_AR_SERVER") +
            "&form=");

    /** Helper to open the Incident form in Mid-Tier
     *  Usage of this property requires the addition of a parameter name/value, for example:
     *      String url = theme.getProperty("MIDTIER_INCIDENT_URL") + "&eid=000000000000001";
     */
    theme.setProperty("MIDTIER_INCIDENT_URL", theme.getProperty("MIDTIER_FORM_SERVLET") +
            java.net.URLEncoder.encode("HPD:Help Desk", "UTF-8"));

    /** Helper to open the Infrastructure Change form in Mid-Tier
     *  Usage of this property requires the addition of a parameter name/value, for example:
     *      String url = theme.getProperty("MIDTIER_CHANGE_URL") + "&eid=000000000000001";
     */
    theme.setProperty("MIDTIER_CHANGE_URL", theme.getProperty("MIDTIER_FORM_SERVLET") +
            java.net.URLEncoder.encode("CHG:Infrastructure Change", "UTF-8"));

 

Looking at the code, you can see where properties were defined to hold both Mid-Tier and AR Server information.  If you recall in step 3 above, you added your information to these two properties.  Those properties were then used to define other properties that hold URLs to the Help Desk and Infrastructure Change forms in Mid-Tier.

The other file that was added to the new theme was called "incident_details.jsp" and it was placed in the root of your new theme.  This jsp file is a duplicate of the "event.jsp" file that is shipped with the default theme.  The only difference between the two files is the addition of the link at the bottom of the file.  Here is the new code that generates the link:

        <div class="link">
            <a target="_blank" style="text-decoration: underline; color: blue;"
               href="<%=theme.getProperty("MIDTIER_INCIDENT_URL")%>&eid=<%=event.getId()%>">
                Open the Incident
            </a>
        </div>

You'll notice that the link uses the "MIDTIER_INCIDENT_URL" property that was defined in the config.jspf file as well as a function named "getId" to take the Id of the event and build the URL to Mid-Tier.  Another jsp file could be easily created from this one and used to display a link to a Change record by simply replacing the "MIDTIER_INCIDENT_URL" property with the "MIDTIER_CHANGE_URL" property that was defined in the config.jspf file.

The other steps  in the section above were simply configuring the calendar and event type json files to use the new theme and new jsp file so that the link could be displayed.


That's all there is to it.  Simply modifying a theme's config.jspf file will allow you to add properties that can be easily used by any calendar that uses that theme.  Calendars can use these properties by calling them from the jsp files that render the calendars and event details.