ServiceNow Incidents Template | Axero Documentation

The ServiceNow Incidents template displays a list of your ServiceNow incidents right in Axero. The template is a built-in template and comes with your Axero site. To use the template:

1. Add a Content List Widget on a Page Builder page
2. Edit the widget
3. Set the widget subtype to ServiceNow Incidents
4. Select the ServiceNow Incidents template in the Template tab

Template HTML

Below is the HTML of this template for your reference.

<div class="axero-widget {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}">
    {{#if ShowWidgetHeader}}          
    <div class="axero-widget-header">
        <h3>{{{WidgetTitle}}}</h3>
    </div>
    {{/if}}        
    {{#if AdditionalData.IsAccountConnected}}            
    <div class="axero-widget-content axero-widget-content-padded">
        {{#if Contents}}
        <ul class="articlelist">
            {{#each Contents}}
    
            <div class="row-fluid ax-case-entry collapsed">
                <div class="span10 ax-case-info">
                    <div class="ax-case-name">
                        #{{WallPostURL}}&nbsp;<a class="case-title" title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a>
                    </div>
                    <div class="ax-case-properties">
                        <span class="prop-item"><strong>{{../Resources.GlobalCreatedText}}:</strong> <a class="axero-user-card-link" data-user="" href="{{AuthorUserProfileURL}}">{{AuthorUserDisplayName}}</a>
                        </span><span class="prop-sep">&nbsp;·&nbsp; </span><span class="prop-item"><strong>{{../Resources.GlobalUpdatedText}}:</strong> <a class="axero-user-card-link" data-user="" href="{{UpdatedByUserProfileURL}}">{{UpdatedByUserDisplayName}}</a> {{DateUpdatedString}}</span> 
                    </div>
                    <div class="ax-case-properties-container hide">
                        <div class="ax-case-properties">
                            <span class="prop-item"><span class="bold">Priority:</span> <a href="{{PriorityURL}}">{{{Priority}}}</a></span>
                        </div>
                    </div>
                </div>
    
                <div class="span2 ax-case-options-container">
                    <div class="ax-case-comments"><i class="icon-comment"></i> {{CommentCount}}</div>
                </div>
            </div>
    
            {{/each}}
        </ul>
        {{else}} 
        <div class="alert alert-info text-center">
            {{Resources.GlobalNoSelectedItemsText}}
        </div>
        {{/if}}  
    </div>
    {{else}}                
    <div id="userNotConnectedView" data-ng-show="(!isLoading) &amp;&amp; (!isCurrentUserConnected)" class="">
        <section id="connectToDriveSection" class="axero-external-connect sharepoint hide" data-accounttype="5" style="display: block;">
            <div class="axero-external-connect__inner">
                <div class="icon">
                    <img id="connectToExternalDriveLogoImg" src="/Assets/Themes/default/images/serviceNow_icon.png">
                </div>
                <div class="content">
                    <div class="message" id="connectToDriveMessage">If you would like to access ServiceNow incidents, you must connect and login using your ServiceNow account.</div>
                    <div class="actions"><a id="connectToDriveBtn-{{WidgetID}}" class="btn btn-large btn-success" href="#" data-role="connect" data-ng-click="Connect()">Connect                          </a></div>
                </div>
            </div>
        </section>
    </div>
    <script>                     +

        $('#connectToDriveBtn-{{WidgetID}}').on('click', function(e) {
            e.preventDefault();
            var url = "/{{AdditionalData.ConnectedAccountSpaceID}}/connectedaccounts/getByID('{{AdditionalData.ConnectedAccountID}}')/connect?src=" + window.location.href;
            $.get(Communifire.buildApiUrl(url)).then(function(response) {
                 window.location.href = response.ResponseData;
            });
        });      

    </script>
    {{/if}}            
    {{#if ShowWidgetFooter}}          
    <div class="axero-widget-footer">
        {{{FooterHTML}}}         
        <a class="small hide" href="#">{{Resources.GlobalAllSmallText}} <i class="icon-double-angle-right"></i></a>
    </div>
    {{/if}}          

</div>