Version 11

    Pre-requisite for enabling Java script in Advanced HTML Tile


    1. Create a User Group (Admin Console > People > Create User Group > with User Group Name as "jep_advanced_html_tile_js"

    2. Add user(s), who are to view the Java scripts, to this group.


    All JavaScript will be removed from the Advanced HTML Tile configurations for users who are not added to the defined Security Group.


    Steps to configure Advanced HTML Tile

    1. Go to the Place (Space, Group) where the Advanced HTML Tile needs to be configured.

    2. Go to Activity Page>Settings>Add a Tile.

    3. Click on External Add-ons in Categories and Select JEP: Advanced HTML Tile.


    4. The Visibility Rule Settings screen is displayed as shown below:


    5. Click on the gear icon on the top right to also view the 3 different options to configure the Advanced HTML Tile.


    6. Set the Visibility Rules, General Settings and HTML settings.


    Visibility Rules

    Set the Visibility Rules at anytime to enable the content of the Advanced HTML Tile to be visible only for specific users.

    Default: No visibility rules are set.


    Select CREATE VISIBILITY RULE to create new or update existing Visibility Rule(s). Users matching the defined Visibility Rule(s) will be enabled to view the content of this tile.




    Select CONTINUE W/O VISIBILITY RULE to proceed further without setting any Visibility Rule. This will enable content to be visible to all users by default.

    Select ADD RULE to add one or more rules.


    Under Condition,

    - select Match all rules if the content of the Advanced HTML Tile should be visible to all users, who match all the visibility rules defined.


    - select Match any rule if the content of the Advanced HTML Tile should be visible to all users, who match any one of the visibility rules defined.

    Rules can be added by selecting any of the following three rule types:

    - Language (provide one or more languages defined for the users)

    - Profile Field (provide specific details for matching the information in the user's profile)

    - Security Group (provide one or more security groups in which the concerned user is a member)


    The rule(s) which have already been defined can be deleted by selecting DELETE RULE

    To add rule(s) of the type Language, select the appropriate language from the drop-down list.

    To add rule(s) of the type Profile Field, provide:

    - Profile Field Name

    - Profile Field value

    - and optionally, indicate if it is a Date value.

    To add rule(s) of the type Security Group, provide:

    - names of the Security Group(s), in which the user is a member.

    General Settings

    Specify the Title of the tile.


    Enable Display tile title? to enable the tile title.

    State Headline and set Headline Alignment.

    Detail the Description and set the Description Alignment in this section.
    Set the Background image and position, Padding and Text Color in the Advanced HTML Tile.

    Describe the Action label and specify the Action URL


    Enable Open in a new window to open Action URL in a new window and set Action Alignment.


    Add the HTML code with or without Java script.


    Insert the HTML code within <div> ... </div> to wrap the content, as the tile already provides the html, head and body tags.



    7. On saving the settings, the message confirming the Advanced HTML Tile configurations appears.

    8. Save the Tile Settings.


    Advanced HTML Tile is configured successfully!


    Configuration ExampleSettings

    General Settings:

    • Title: Sample Title: Advanced HTML
    • Display Tile Title: Selected
    • Headline: Headline (centre aligned)
    • Description: Describe the use case for this tile here in one or two lines. This setting is left aligned.
    • Description Alignment: Left
    • Background Image URL
    • Padding: 20px (all around)
    • Action label + URL: "AureaWorks" and link provided



    • Code with Java script provided


    <h4>Here is a sample HTML code. </h4>

    <p id="demo">

    This part of the text will be automatically considered as the body of the page.

    No need to declare the tags < html >, < head >, or < body > tags.</p>


    <div id="demo_text"></div>


    <div id="demo_image"></div>


    <button type="button" onclick="buttonClick()" id="more">More Info</button>



    function buttonClick(){