Loading ...

Custom Featured People Template | Communifire Documentation

Home » communifire documentation » Wiki » Documentation » Control Panel » System » Page Builder » Page Builder Extras » Custom Featured People Template

Comments (5)

   
cdale

This is awesome! Is there a way to create a custom birthday and anniversary list like this?

11/12/2020 04:21 PM
 · 
by
   
gskamau

Hi Chloie,

We can provide the code for this but the widget wouldn't update on its own like the People widget. You would need to edit the widget and change which people to display.

The widget also wouldn't list birthdays and anniversaries separately. It would display a user and their birthday and anniversary in the same row. Would you like the code for this?

Grace

11/12/2020 06:47 PM
 · 
by
   
cdale

Grace Kamau Axero Solutions ,

That makes sense, and thank you for explaining it! If you could send the code over that would be perfect. 

Thank you! 
Chloie

11/12/2020 08:09 PM
 · 
by
   
gskamau

Hi Chloie,

Below is the code for the template. Follow the same steps on this page to create it on your site. In addition, when you're creating the template, add GlobalBirthDayText,GlobalWorkAnniversaryText,GlobalOnText in Resource Keys CSV.

<div class="axero-widget {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}">
    {{#if ShowWidgetHeader}}
    <div class="axero-widget-header">
        <h3>{{{WidgetTitle}}}</h3>
    </div>
    {{/if}}
    <div class="axero-widget-content">
        <div class="list">
        <ul> 
            {{#each Contents}}
            <li>
                <div class="axero-section-list-avatar">
                <a href="{{ContentURL}}" title="{{{Title}}}"><img alt="{{{Title}}}" src="{{ContentImageURL}}" /></a>
            </div>
            <div class="axero-section-list-content">
                <div class="axero-section-list-content-title">
                    <a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a>
                </div>
                <div class="axero-section-list-content-date" id="wgt-specific-ppl-{{ContentID}}" style="user-select: auto;">
                  <span class="hide" id="wgt-specific-birthday-show-{{ContentID}}"><i class='icon-gift'></i> {{../Resources.GlobalBirthDayText}} {{../Resources.GlobalOnText}} <span id="wgt-specific-birthday-{{ContentID}}"></span></span> 
                  <span class="hide" id="wgt-specific-sep-{{ContentID}}">|</span> <span class="hide" id="wgt-specific-anniv-show-{{ContentID}}"> <i class='icon-calendar'></i> {{../Resources.GlobalWorkAnniversaryText}} {{../Resources.GlobalOnText}} <span id="wgt-specific-anniv-{{ContentID}}"></span> (<span id="wgt-specific-anniv-years-{{ContentID}}"></span> years served)</span>
                 </div>
            </div>
            </li>
            {{/each}}
        </ul>
        </div>
    </div>
    {{#if ShowWidgetFooter}}
    <div class="axero-widget-footer">
        {{{FooterHTML}}}
    </div>
    {{/if}}
</div>
{{#each Contents}}
<script>
    $.ajax({
        type: "GET",
        url: "/api/content/" + {{ContentID}} + "?contentTypeID=15&fields=Date of birth,Hire date",
        contentType:"application/json; charset=utf-8",
        dataType: "JSON",
        success: function(response){
            if(response.ResponseData["Date of birth"]) {
                var birthdaySpan = "wgt-specific-birthday-" + {{ContentID}};
                var birthdayText = new Date(response.ResponseData["Date of birth"]).toLocaleString(undefined, {
                    month: "numeric", day: "numeric"
                })
                document.getElementById(birthdaySpan).innerHTML = birthdayText;
                $("#wgt-specific-birthday-show-"+{{ContentID}}).removeClass("hide")
            }
            
            if(response.ResponseData["Hire date"]) {
                var annivSpan = "wgt-specific-anniv-" + {{ContentID}};
                var annivText = new Date(response.ResponseData["Hire date"]).toLocaleString(undefined, {
                    month: "numeric", day: "numeric"
                })
                document.getElementById(annivSpan).innerHTML = annivText;
                
                var diff = new Date(Date.now() - new Date(response.ResponseData["Hire date"]));
                var years = Math.abs(diff.getUTCFullYear() - 1970) + 1;
                var yearsSpan = "wgt-specific-anniv-years-" + {{ContentID}};
                document.getElementById(yearsSpan).innerHTML = years;
                $("#wgt-specific-anniv-show-"+{{ContentID}}).removeClass("hide")
            }
            if(response.ResponseData["Date of birth"] && response.ResponseData["Hire date"])
                $("#wgt-specific-sep-"+{{ContentID}}).removeClass("hide")
        }
    });
</script>
{{/each}}

The widget will look like this:

People who have only one of the profile fields filled out will display just that field. Let me know if any changes need to be made to the template.

Grace

11/13/2020 12:36 AM
 · 
by
   
cdale

Grace Kamau Axero Solutions this is perfect! Thank you for sending it over. 

Best, 
Chloie

11/13/2020 03:07 PM
 · 
by
   
cdale

Hey  Grace Kamau Axero Solutions , 

One more question, is there a way to add multiple users to a list vs adding them one by one? 

Thanks, 
Chloie

11/13/2020 05:01 PM
 · 
by
   
gskamau

Hi Chloie,

For this widget, you need to select the users one by one.

Grace

11/13/2020 05:23 PM
 · 
by
   
opecfund

Hi  Grace Kamau Axero Solutions ,

is there anyway to manually sort the list? instead of by title or most viewed?

I mean I want to select which name comes as first and which one as second and so on...

Please let me know.

Thanks,

Abi

3/1/2021 03:32 PM
 · 
by
   
gskamau

Hi Abi,

It isn't possible to sort this widget in a custom order.

Grace

3/1/2021 06:10 PM
 · 
by

Pages

Intranet Software