[text] maybe

Viewer

  1. <content id="data-content">
  2.  
  3.     <style>
  4.         mgt-person {
  5.             --initials-background-color: {{@root.theme.palette.themePrimary}};
  6.         }
  7.  
  8.     </style>
  9.  
  10.     <div class="template">
  11.  
  12.         {{#if @root.properties.showSelectedFilters}}
  13.             <pnp-selectedfilters 
  14.                 data-filters="{{JSONstringify filters.selectedFilters 2}}" 
  15.                 data-filters-configuration="{{JSONstringify filters.filtersConfiguration 2}}" 
  16.                 data-instance-id="{{filters.instanceId}}" 
  17.                 data-operator="{{filters.filterOperator}}"
  18.                 data-theme-variant="{{JSONstringify @root.theme}}"
  19.             >
  20.             </pnp-selectedfilters>
  21.         {{/if}}
  22.        
  23.         <div class="template--header">
  24.             {{#if @root.properties.showResultsCount}}
  25.                 <div class="template--resultCount">
  26.                     <label class="ms-fontWeight-semibold">{{getCountMessage @root.data.totalItemsCount @root.inputQueryText}}</label>
  27.                 </div>
  28.             {{/if}}
  29.  
  30.             <div class="template--sort">
  31.                 <pnp-sortfield 
  32.                     data-fields="{{JSONstringify @root.properties.dataSourceProperties.sortList}}" 
  33.                     data-default-selected-field="{{sort.selectedSortFieldName}}" 
  34.                     data-default-direction="{{sort.selectedSortDirection}}"
  35.                     data-theme-variant="{{JSONstringify @root.theme}}">
  36.                 </pnp-sortfield>    
  37.             </div>
  38.         </div>
  39.         
  40.         <div>
  41.             <ul class="template--defaultList" style="display:flex;flex-wrap:wrap;justify-content:space-between;">
  42.                 {{#each data.items as |item|}}
  43.                     <pnp-select 
  44.                         data-enabled="{{@root.properties.itemSelectionProps.allowItemSelection}}" 
  45.                         data-index="{{@index}}" 
  46.                         data-is-selected="{{isItemSelected @root.selectedKeys @index}}">
  47.  
  48.                         <template id="content">
  49.                             <li class="template--peopleListItem" tabindex="0" style="max-width:50%;margin:inherit 0.5rem;">
  50.                                 {{#> resultTypes item=item}}
  51.  
  52.                                     {{#and @root.properties.layoutProperties.showPersonaCard (slot item @root.slots.PersonQuery)}}
  53.                                         <mgt-person user-id="{{getUserEmail (slot item @root.slots.PersonQuery)}}" person-card="hover">
  54.                                             <template>
  55.                                                 <pnp-persona 
  56.                                                     data-image-url="\{{personImage}}" 
  57.                                                     data-fields-configuration="{{JSONstringify @root.properties.layoutProperties.peopleFields}}" 
  58.                                                     data-item="{{JSONstringify item}}" 
  59.                                                     data-persona-size="{{@root.properties.layoutProperties.personaSize}}"
  60.                                                     data-theme-variant="{{JSONstringify @root.theme}}"
  61.                                                     data-instance-id="{{@root.instanceId}}"
  62.                                                     data-context="{{JSONstringify @root}}">
  63.                                                 </pnp-persona>
  64.                                             </template>
  65.                                             <template data-type="person-card">
  66.                                                 <mgt-person-card inherit-details>
  67.                                                 </mgt-person-card>
  68.                                             </template>
  69.                                         </mgt-person>
  70.                                     {{else}}
  71.                                         <pnp-persona 
  72.                                             data-fields-configuration="{{JSONstringify @root.properties.layoutProperties.peopleFields}}"
  73.                                             data-item="{{JSONstringify item}}" 
  74.                                             data-persona-size="{{@root.properties.layoutProperties.personaSize}}" 
  75.                                             data-context="{{JSONstringify @root}}"
  76.                                             data-instance-id="{{@root.instanceId}}"
  77.                                             data-theme-variant="{{JSONstringify @root.theme}}"
  78.                                         ></pnp-persona>
  79.                                     {{/and}}
  80.                                     
  81.                                 {{/resultTypes}}
  82.                             </li>
  83.                         </template>
  84.                             
  85.                     </pnp-select>
  86.                 {{/each}}
  87.             </ul>
  88.         </div>
  89.  
  90.         {{#if @root.properties.paging.showPaging}}
  91.  
  92.             {{#gt @root.data.totalItemsCount @root.properties.paging.itemsCountPerPage}}
  93.                 <pnp-pagination 
  94.                     data-total-items="{{@root.data.totalItemsCount}}" 
  95.                     data-hide-first-last-pages="{{@root.properties.paging.hideFirstLastPages}}"
  96.                     data-hide-disabled="{{@root.properties.paging.hideDisabled}}"
  97.                     data-hide-navigation="{{@root.properties.paging.hideNavigation}}"
  98.                     data-range="{{@root.properties.paging.pagingRange}}" 
  99.                     data-items-count-per-page="{{@root.properties.paging.itemsCountPerPage}}" 
  100.                     data-current-page-number="{{@root.paging.currentPageNumber}}"
  101.                     data-theme-variant="{{JSONstringify @root.theme}}"
  102.                 >
  103.                 </pnp-pagination>
  104.             {{/gt}}
  105.             
  106.         {{/if}}
  107.  
  108.     </div>
  109.  
  110. </content>
  111.  
  112. <content id="placeholder-content">
  113.     <div class="placeholder">
  114.  
  115.         {{#if @root.properties.showResultsCount}}
  116.             <div class="template--resultCount">
  117.                 <span class="placeholder--shimmer placeholder--line" style="width: 20%"></span>
  118.             </div>
  119.         {{/if}}
  120.  
  121.         <div>
  122.             <ul class="template--defaultList">
  123.                 {{#times @root.properties.paging.itemsCountPerPage}}   
  124.                     <pnp-personashimmers 
  125.                         data-persona-size="{{@root.properties.layoutProperties.personaSize}}"
  126.                         data-theme-variant="{{JSONstringify @root.theme}}"
  127.                     >
  128.                     </pnp-personashimmers>
  129.                 {{/times}}
  130.             </ul>
  131.         </div>
  132.     </div>
  133. </content>

Editor

You can edit this paste and save as new:


File Description
  • maybe
  • Paste Code
  • 06 Mar-2023
  • 6.57 Kb
You can Share it: