If your custom code will run on multiple pages (for example, a code block on the Employee Profile page), it may need to identify some details about which page is currently being displayed. Some of this information is in the URL (e.g. /page/123/lunch-and-learns), but more details are stored as data properties on the "s6-wrapper" div.
Javascript Code Example
// Query the current page, and if it's page 123 make the page background pink:
const wrapperDiv = document.querySelector('div#s6-wrapper')
let currentObjectType = wrapperDiv?.attributes['data-objecttype']?.value
let currentObjectID = wrapperDiv?.attributes['data-objectid']?.value
if (currentObjectType=="page" && currentObjectID=="123")
{
wrapperDiv.style.backgroundColor='pink'
}
Available Properties and Values
| Property | Values |
| data-objecttype | "page" - a standard page or guide page "community" - a community home page "directory" - a directory (e.g. employee directory, project directory) "library" - a library "profile" - a profile page Note: certain other system pages, such as configuration screens, have other values for this property. |
| data-objectid | Answer the question, "which [object type]?" So this will be an integer page ID for pages, a GUID entity ID (S6 employeeID, project ID, etc) on profile pages, an integer library ID on library pages, a string with a profile type on directory pages, or an integer communityID on community pages. |
| data-profiletype | On objecttype="profile" pages, always one of "company", "contact", "employee", "opportunity", or "project". |
| data-communityid | When present, contains the current community ID (an integer). Note that some pages in Synthesis 6, such as directories, do not belong to a community. |
Note: These values do not reflect assets such as images, videos, and documents being displayed in the full-window viewer.
Note: Data attribute values such as these are always strings in the markup, even if the value they contain is (for example) an integer.
Detecting Page Changes in JavaScript
Synthesis 6 generally works as a "Single Page App," in which click moving from one page to another doesn't trigger the browser to refresh the entire page. Because of this, code that you add to your intranet using the "Custom JavaScript" feature will not run each time a user goes to a different page. If your code must run each time a user navigates to a new page in Synthesis, you can listen for a standard JavaScript event called "synthesispageload."
For example, to use the Custom JavaScript feature to run a custom function whenever a user goes to a new page:
// This is your function to run:
function anyPageLoaded() {
console.log("ANY page just loaded:", document.title.split(' - ')[0])
}
// This line registers an event listener to run that function when a page loads:
window.addEventListener('synthesispageload', anyPageLoaded)
Because the "synthesispageload" event fires after the page has completed loading, it can also be used in an Embed Block to run custom code for a single page:
<script type="text/javascript">
// This is your function to run:
function thisPageLoaded() {
console.log("THIS page just loaded:", document.title.split(' - ')[0])
// Your function must remove the event listener that called it
// to prevent the function from running when the user leaves the page:
window.removeEventListener('synthesispageload', thisPageLoaded)
}
// This line registers an event listener to run that function
// when the page finishes loading:
window.addEventListener('synthesispageload', thisPageLoaded)
</script>
Please note that when running custom code for a single page, your custom function must remove the event listener to prevent the code from running again at an undesired time (such as when leaving the page). Additionally, publishing a page update is itself a page load event, so it is recommended to reload the browser window after publishing a page change including event-driven custom code in an embed block.
Also note that the "synthesispageload" event does not fire when a fullscreen "modal" view opens or closes. For example, the event will not fire when a user clicks on an image to bring up the fullscreen image viewer.
Using Page Information CSS Classes to Create Custom Styles
Similar information is available in the list of CSS classes on the "s6-wrapper" div. These class names are:
| Class Name | Description |
| objtype_[objectType] | For example, "objtype_page", "objtype_directory". |
| [objectType]_[objectID] | For example, "library_49", "directory_employee". |
| profilepage_[profileType] | For example, "profilepage_employee". |
| communityid_[community ID] | For example, "communityid_94". |
You can use these to create powerful CSS style declarations. Some examples:
/* Make the page title blue for pages in community ID 94: */
div#s6-wrapper.communityid_94 div.s6-pageTitle
{
color:#77CCFF;
}
/* Hide breadcrumbs on all Directory pages: */
div#s6-wrapper.objtype_directory div.s6-breadcrumbs
{
visibility:hidden;
}
/* Rotate a single user's profile page headshot 45 degrees: */
div#s6-wrapper.profilepage_employee.profile_a11eb9e8-e309-4c8b-a35f-f85367a9dc70 div.EntityHeader img
{
transform:rotate(45deg);
}
/* Add a light-green background to the area below the navbar on every project page: */
div#s6-wrapper.profilepage_project
{
background-color: #EEFFEE;
}
/* Add a yellow background to the area below the navbar on a specific page: */
div#s6-wrapper.page_696 {
background-color:yellow;
}