Service Portal: add a carousel widget with fixed height and embedded homepage search


based on a copy of the ootb carousel widget

HTML:

<div class="pull-in">
  <uib-carousel interval="options.interval">
    <uib-slide ng-repeat="slide in ::data.slides" active="slide.active">
      <div class="container">
        <a href="{{::slide.url}}" title="Open carousel item">
          <img ng-src="{{::slide.background}}" style="margin:auto; width:100%;" role="presentation">
        </a>
      </div>
    </uib-slide>
     <!--homepage search-->
 <!--<div id="homepage-search" class="hidden-xs wrapper-xl">  
  <div class="wrapper-xl"> -->       
  <div id="homepage-search" class="hidden-xs wrapper-xl">  
  
    <h2 class="text-center text-4x m-b-lg sp-tagline-color" ng-bind="options.title"></h2>             
    <div ng-if="options.short_description" class="text-center h4 m-b-lg sp-tagline-color" ng-bind="options.short_description">
   </div>              
   <sp-widget widget="data.typeAheadSearch" />  
  
</div>
  <!-- homepage search end -->

  </uib-carousel>
  
  <!--<div>
    <widget id="typeahead-search"></widget>
  </div>-->
  


CSS:

div.container {
 max-height: 200px;
}

OPTION SCHEMA:

[{"name":"typeahead_search","default_value":"{title: 'How can we help?', size: 'lg', color: 'default'}","section":"Presentation","label":"Typeahead Search","type":"string"}]

SERVER SCRIPT:

data.slides = $sp.getRelatedList('sp_carousel_slide','carousel');
data.typeAheadSearch = $sp.getWidget('typeahead-search', options.typeahead_search);


Comments

Popular posts from this blog

GlideRecord setValue

variable advanced reference qualifier example

Running transform maps asynchronously