Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Default Handlebars template that can be used (and customized) when a Microsoft Graph based Org Chart app in a WordPress page or post using the WPO365 (WordPress + Office 365) plugin (see https://www.wpo365.com/working-with-handlebars-templates/ for details).
<content>
<script id="jshelpers">
</script>
<header id="header" type="x-handlebars-template">
<style>
.pintraContacts,
.pintraContactsResults {
box-sizing: border-box;
font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
}
.pintraContactsResultsItemContentDisplayName {
font-size: 14px;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 24px;
}
.pintraContactsResultsItemContentDepartment {
font-size: 12px;
font-weight: 200;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 24px;
}
.pintraContactsResultsItemContentEmail {
font-size: 10px;
font-weight: 200;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 24px;
}
.pintraContactsDetailsHeaderContentDisplayName {
font-size: 28px;
font-weight: 200;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pintraContactsDetailsHeaderContentDepartment {
font-size: 14px;
font-weight: 200;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pintraContactsDetailsHeaderContentActions {
display: flex;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.pintraContactsDetailsHeaderContentAction {
padding: 0 8px;
font-size: 14px;
cursor: pointer;
display: flex;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
margin-right: 8px;
}
.pintraContactsDetailsHeaderContentAction:first-child {
padding-left: 0px;
}
.pintraContactsDetailsHeaderContentAction span {
padding: 8px 8px;
}
.pintraContactsDetailsHeaderContentAction:hover,
.pintraContactsDetailsHeaderContentAction::selection {
background-color: #eeeeee;
}
.pintraContactsDetailsHeaderContentAction i {
font-size: 14px;
color: #0078d4
}
.pintraContactsPivotContactColumn {
flex: 0 0 50%;
display: flex;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-moz-box-direction: normal;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 10px;
margin: 4px 4px 4px 0px;
}
.pintraContactsPivotContactColumn.right {
border-left: 1px solid #eeeeee;
}
.pintraContactsPivotContactItem {
cursor: pointer;
padding: 8px;
}
.pintraContactsPivotContactItem:hover {
background-color: #eeeeee;
}
.pintraContactsPivotContactItem::selection {
background-color: #eeeeee;
}
.pintraContactsPivotContactItem .pintraContactsPivotContactItemTitle {
font-size: 12px;
color: #605e5c;
}
.pintraContactsPivotContactItem .pintraContactsPivotContactItemValue {
font-size: 14px;
color: #0078d4;
}
</style>
</header>
<section id="item" type="x-handlebars-template">
<div class="pintraContactsResultsItemContentDisplayName">{{displayName}}</div>
<div class="pintraContactsResultsItemContentDepartment">{{department}}</div>
<!--div class="pintraContactsResultsItemContentEmail">{{mail}}</div-->
</section>
<section id="summary" type="x-handlebars-template">
<div class="pintraContactsDetailsHeaderContentDisplayName">{{displayName}}</div>
<div class="pintraContactsDetailsHeaderContentDepartment">{{department}}</div>
<div class="pintraContactsDetailsHeaderContentActions">
<div class="pintraContactsDetailsHeaderContentAction" onclick="window.open('mailto:{{mail}}', '_blank')">
{{fabricIcon 'Mail'}}
<span>Send email</span>
</div>
<div class="pintraContactsDetailsHeaderContentAction"
onclick="window.open('https://teams.microsoft.com/l/chat/0/0?users={{userPrincipalName}}' , '_blank')">
{{fabricIcon 'TeamsLogo'}}
<span>Start chat</span>
</div>
</div>
</section>
<section id="contact" type="x-handlebars-template">
<div class="pintraContactsPivotContactColumn">
<div class="pintraContactsPivotContactItem" onclick="window.open('mailto:{{mail}}', '_blank')">
<div class="pintraContactsPivotContactItemTitle"><span>Email</span></div>
<div class="pintraContactsPivotContactItemValue"><span>{{mail}}</span></div>
</div>
<div class="pintraContactsPivotContactItem"
onclick="window.open('https://teams.microsoft.com/l/chat/0/0?users={{userPrincipalName}}' , '_blank')">
<div class="pintraContactsPivotContactItemTitle"><span>Chat</span></div>
<div class="pintraContactsPivotContactItemValue"><span>{{userPrincipalName}}</span></div>
</div>
</div>
<div class="pintraContactsPivotContactColumn right">
<div class="pintraContactsPivotContactItem" onclick="window.open('tel:{{businessPhones}}', '_blank')">
<div class="pintraContactsPivotContactItemTitle"><span>Work phone</span></div>
<div class="pintraContactsPivotContactItemValue"><span>{{businessPhones}}</span></div>
</div>
<div class="pintraContactsPivotContactItem" onclick="window.open('tel:{{mobilePhone}}', '_blank')">
<div class="pintraContactsPivotContactItemTitle"><span>Mobile</span></div>
<div class="pintraContactsPivotContactItemValue"><span>{{mobilePhone}}</span></div>
</div>
</div>
</section>
<section id="manager" type="x-handlebars-template">
<div class="pintraContactsResultsItemContentDisplayName">{{displayName}}</div>
<div class="pintraContactsResultsItemContentDepartment">{{department}}</div>
<!--div class="pintraContactsResultsItemContentEmail">{{mail}}</div-->
</section>
<section id="current" type="x-handlebars-template">
<div class="pintraContactsResultsItemContentDisplayName">{{displayName}}</div>
<div class="pintraContactsResultsItemContentDepartment">{{department}}</div>
<!--div class="pintraContactsResultsItemContentEmail">{{mail}}</div-->
</section>
<section id="directReport" type="x-handlebars-template">
<div class="pintraContactsResultsItemContentDisplayName">{{displayName}}</div>
<div class="pintraContactsResultsItemContentDepartment">{{department}}</div>
<!--div class="pintraContactsResultsItemContentEmail">{{mail}}</div-->
</section>
<footer id="footer" type="x-handlebars-template">
<div></div>
</footer>
</content>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.