Quick link widget- rearrange the order of view

[Ashmiya]

How to re-arrange the order of view in quick links ? to appear in 

x    x

x   x

x    x

x   x

order rather than straight line?

Edit: Quick Links (CD). Wanted to check if those image based links can be grouped into 

two columns rather than straight line.?

x    x

x   x

x    x

[Community Alums]

Hi @Ashmiya ,

I don't think you can Re-arrange the order but you can Modify the Quick links widget display instead.

Follow this :https://docs.servicenow.com/bundle/sandiego-employee-service-management/page/product/employee-center...

Mark my answer correct & Helpful, if Applicable.

Thanks,

Sandeep

[Susan Britt]

Hi @Ashmiya 

Are you using the "Quick Links" or "Quick Links (CD)" widget?

[Ashmiya]

Hi @sbritt

It is Quick Links (CD). Wanted to check if those image based links can be grouped into 

two columns.

x    x

x   x

x    x

[Shruti]

Hi, Clone the Quick Links (CD) widget and paste below HTML code

<section class="widget-image-based-links"
          ng-class="[{'show-heading': c.data.displayHeadingText},
                   {'show-bounding-box': c.data.displayBoundingBox},
                   {'show-background': c.data.showBackground}]">
  <div ng-if="c.data.items.length" class="panel panel-{{::options.color}} b " rect="rect">
  <div class="panel-heading">
    <h3 class="panel-title" ng-bind="::c.options.title" id="header-{{data.sysId}}"></h3>
  </div>
  	<div class="panel-body transclude">
    <ul class="row list-group"> 
      <li ng-repeat="item in c.data.items" class="col-md-6 col-sm-6 col-xs-6 list-group-item" ng-class="{'preview-outline preview-info-container-parent': item.is_preview && item.is_content_active == 1, 'preview-outline-inactive preview-info-container-parent': item.is_preview && item.is_content_active == 0}">
        
        <portal-content-preview-info-tab is-compact="true" item="item" data="c.data" index="$index">
        </portal-content-preview-info-tab>
        <div aria-labelledby="header-{{data.sysId}}">
          <a target="{{(item.open_in === 'current' && !c.data.isSCAPreview) ? '_self' : '_blank'}}" ng-href={{::item.url}} aria-label="{{::item.title}}" any-click="c.onLinkClick(item)" data-toggle="tooltip" data-placement="bottom" data-title="{{::item.title}}">
            <img ng-if="item.image_src" src={{::item.image_src}} title={{::item.title}} alt="{{::item.title}}">
            <span ng-if="!item.image_src" class="text-xs l-h">{{::item.title}}</span>
          </a>
        </div>        
      </li>
    </ul>
  </div>
  </div>
</section>