Configuring HTML Portlets

HTML Portlets are portlets that you can create using HTML tags.
You can write tags in HTML portlets to show systems or WEB sites outside of Garoon.

Notes on HTML Tags

To ensure that the HTML portlet works correctly, be noted the following when you write tags:

Using Lowercase Characters

HTML tags are written in lowercases.

Using End Tags

You should write start tags and end tags in pairs. If you place a portlet that does not have proper HTML tag pairs in a portal, it can cause problems such as a portal editing page incorrectly appears or a portal that can not be moved.
You also should note that not to cross nested tag pairs when you write HTML tags.

Example:

Example of a HTML tag in a nested tag

Tags That Can Be Omitted

You do not need to describe html, head, or body tags in HTML portlets.

Secure Coding Guidelines

When you write scripts in JavaScript, read the following sections carefully in the Secure Cording Guidelines:
Avoid Using Cross-Site Scripting
Avoid Using Cross-Site Request Forgery

Adding HTML Portlets

Create HTML portlets. If the system administrator grants the users permissions to use portlets in My Portals, users can use them in their My Portals.

Steps:
  1. Click the administration menu icon (gear icon) in the header.

  2. Click "Garoon settings".

  3. Select "Application settings" tab.

  4. Click "Portal".

  5. Click "HTML portlet".

  6. On "HTML portlet" screen, click the item to add an HTML portlet.

    Image of adding an HTML portlet enclosed in a red frame

  7. On the screen to add HTML portlets, enter the "Portlet" field.

    You should set the default portlet name.
    Clicking "Add localized name" allows you to set portlet names in multiple languages.
    If you do not set the portlet name in the user preference language, the default portlet name is displayed.
    The following languages can be set:

    • 日本語
    • English
    • 中文 (简体)
    • 中文 (繁體)
      Displayed in Traditional Chinese.
    Image of entering a portlet name

  8. Set the "Groups" field.

    Select the portlet group to include the portlet.
    Image of setting a group field

  9. Set the "My Portal" field.

    To allow users to use the added HTML portlets in their My Portals, select the "Allowed" check box for My Portal.
    Image of allowing users to use in their My Portals

  10. Set the contents of the portlet field.

    Use HTML tags and formatting to write the contents of the portlet.
    Image of entering portlet contents

    You can customize the HTML portlets using the following functions:

    • Keywords description:
      You can show information of users who use portlets by creating Usable Keywords.
    • Show kintone graphs or schedules:
      You can show graphs and schedules taken from kintone apps by writing HTML format codes (embedding tags).
      For details, see Retrieving Embed Tags for Summarized Results in kintone help.

  11. Confirm your settings and click "Add".

Usable Keywords

By using keywords, you can display user information of users who use portlets in HTML portlets.
The keyword replaces the user information of users who use the portlet.
Usable Keywords are as follows:

Keyword Meaning
%Name% User name
%ID% User ID used in Garoon system
%Account% Login name
%Mail% E-mail added to the user information
%Tel% Contact information added in the user information
%URL% URL added in the user information

HTML Sample for Kintone Update Portlets

You can add the "kintone notifications" portlet to portals as an HTML portlet using the following HTML tags:

<table class="top_title">
<tr><td><strong>kintone notifications</strong></td></tr>
</table>
<table class="list_column">
<tr>
<td>
<iframe src="/k/portlet/notifications" height="500" width="100%" style="border:0px;">
</iframe>
</td>
</tr>
</table>

HTML Sample for Mailwise Portlet

You can add the "Mailwise" portlet to portals as an HTML portlet using the following HTML tags:

<table class="top_title" style="">
 <tbody><tr>
  <td nowrap="nowrap"><strong><nobr><a class="" href="/m/" target="_blank">Mailwise</a></nobr></strong></td>
 </tr>
</tbody>
</table>
<div class="portal_frame">
<table class="list_column" style="">
<tr><td>
<div class="mailwise_portlet_main" style="padding:4px;"></div>
</td></tr>
</table>
</div>
<script type="text/javascript">
 document.open(); document.write( '<script src="' +
(function(){
      var linkTags = document.getElementsByTagName(" mem-invalid-attributes-holder=link"); mem-invalid-attributes-holder=for(var i="0;" mem-invalid-attributes-holder=i<linktags.length; mem-invalid-attributes-holder=i++){ mem-invalid-attributes-holder=if(linktags.item(i).href.match( mem-invalid-attributes-holder=td mem-invalid-attributes-holder=)){ mem-invalid-attributes-holder=return mem-invalid-attributes-holder=linktags.item(i).href.replace( mem-invalid-attributes-holder=rn¥ mem-invalid-attributes-holder=tml¥ mem-invalid-attributes-holder=td.css.* mem-invalid-attributes-holder="cbmw5 mem-invalid-attributes-holder=); mem-invalid-attributes-holder=} mem-invalid-attributes-holder=""; mem-invalid-attributes-holder=})() mem-invalid-attributes-holder=+ mem-invalid-attributes-holder='portlet_compiled.js"></sc'+'ript>');
document.close();
</script>

<script type="text/javascript">
grn.mailwise.portlet.draw();
</script>

Changing HTML Portlets

Change HTML portlets.

Steps:
  1. Click the administration menu icon (gear icon) in the header.

  2. Click "Garoon settings".

  3. Select "Application settings" tab.

  4. Click "Portal".

  5. Click "HTML portlet".

  6. On "HTML portlet" screen, select the portlet name of the HTML portlet to change.

  7. On the screen for HTML portlet details, click "Save".

    Image of the edit action link enclosed in a red frame

  8. On the screen to edit HTML portlets, change the settings as necessary.

  9. Confirm your settings and click "Save".

Customizing HTML Portlets Using JavaScript or CSS

You can customize the appearance of HTML portlet screens using JavaScript files and CSS files.
For details, see Portal Customization.

Checking on the Appearance of HTML Portlets

Before making the HTML portlets public, you can preview the appearance of the portlets on user screens.

Steps:
  1. Click the administration menu icon (gear icon) in the header.

  2. Click "Garoon settings".

  3. Select "Application settings" tab.

  4. Click "Portal".

  5. Click "HTML portlet".

  6. On the "HTML portlet" screen, select the HTML portlet to show the preview.

  7. On the screen for HTML portlet details, click the item to check the appearance.

    Image of checking appearance action link enclosed in a red frame

Deleting HTML Portlets

Delete HTML portlets.

Deleting HTML Portlets One by One

Delete each HTML portlet.

Steps:
  1. Click the administration menu icon (gear icon) in the header.

  2. Click "Garoon settings".

  3. Select "Application settings" tab.

  4. Click "Portal".

  5. Click "HTML portlet".

  6. On the "HTML portlet" screen, select the portlet name of the HTML portlet to delete.

  7. On the screen for HTML portlet details, click "Delete".

    Image of the delete action link enclosed in a red frame

  8. Click "Yes" on the deleting HTML portlet screen.

Deleting Multiple HTML Portlets in Bulk

Delete multiple HTML portlets at once.

Steps:
  1. Click the administration menu icon (gear icon) in the header.

  2. Click "Garoon settings".

  3. Select "Application settings" tab.

  4. Click "Portal".

  5. Click "HTML portlet".

  6. On the "HTML portlet" screen, select the check boxes of the portlets to delete, and then click "Delete".

    Image of selecting HTML portlets to delete

  7. Click "Yes" on the deleting all HTML portlets screen.