Product Guru

Tutorial

How to create dynamic community content using the inSidedData object

Forum|Forum|6 years ago
August 22, 2019
35 replies
3950 views

What is the inSidedData object?

The inSidedData object is a powerful dynamic front end element that can be used to return lots of information about a particular community page or user. Lets explore the object in more detail and then see how it can be used:

Looking into the top level properties of the object on this community:

insidedData.communityId: "gainsight-us"
insidedData.device: "desktop"
inSidedData.environment: "production"
inSidedData.language: "en"

Within the inSidedData object are a number of nested objects that dynamically provide much more detail on the page you are on, lets dive into the objects for this community:

inSidedData.content {
	category: {
		id: 38,
		title: "Got a question?"
	}
	path: "Got a question?:Tips for self diagnosing platform issues"
	post: {
		id: null
	}
	topic: {
		id: 1672,
		title: "Tips for self diagnosing platform issues",
		type: "discussion",
		created: 1564131222,
		replies: 0
	}
}
inSidedData.form {
	name: "",
	step: ""
}
inSidedData.page {
	firstRender: false name: "Search: "
	roadmap ""
	pageNumber: 1,
	name: "Search: "
	roadmap "",
	path: "inSpired:Search:Search: "
	roadmap "",
	section: "Search",
	site: "inSpired"
}
insidedData.search {
	phrase: "roadmap",
	count: 62
}
inSidedData.user {
	userid: "571",
	rank: "1",
	role: "roles.administrator, inSided",
	name: "Frank"
}

Now this is just a very brief overview of the inSidedData object - feel free to explore the object in more detail by opening the console in your web browser and typing in 'inSidedData' and hitting return!

Ok this is great but what can I use this for?

We've created these quick examples to show you how to dynamically configure content in your community. Lets create a dynamic widget asking unregistered users to create a community profile and engage with other users. This widget will only show up :

HTML code - create a new HTML Block widget add this code to the newly created widget (make sure not to fill out the title as we're going to create the title in the widget itself):

<div id="register-side-widget" class="" style="display:none;">
   <h4 class="h4">Register now</h4>
   <div class="html">
    <a href="/member/register" class="btn--cta btn--new-topic qa-topic-new-button">Make an account now!</a> 
   </div>
</div>

JS scripts (relies on jQuery to unhide the widget):
1. Only show the widget for non logged in users, any one logged in will not see it

<script> 
  if (inSidedData.user.role == 'roles.guest') { 
    // Make the widget visible 
  	$('#register-side-widget').removeClass().removeAttr('style'); 
  } 
</script>

2. Only show the widget for a certain topic

<script> 
	if (inSidedData.content.topic.id == 1701) { 
		// Make the widget visible 
		$('#register-side-widget').removeClass().removeAttr('style'); 
	} 
</script>

3. Only show the widget for topics within certain categories

<script> 
 if (inSidedData.content.category.id == 117) { 
 	// Make the widget visible 
 	$('#register-side-widget')
     .removeClass()
     .removeAttr('style');
 } 
</script>

4. Only show the widget for mobile users on topics created within the last 24 hours

<script>
 var hours = 24; 
 if (inSidedData.content.topic.created != null) { 
	 if ((inSidedData.content.topic.created > (Date.now() + hours * 60 * 60 * 1000) / 1000) && inSidedData.device == 'mobile') { 
	 	// Make the widget visible
	 	$('#register-side-widget').removeClass().removeAttr('style'); 
	 } 
 }
 </script>

This is just a small sample of what is possible (we will constantly be updating this page and adding more). Alternatively if you don't want to use CSS to show/hide content, you can inject the content into the page instead - just create a unique HTML element in a widget and then use .append() or .html() to inject the markup. Also please note that the inSidedData object can only be used in the last code panel of the third party scripts page - this is because it is only initialised towards at the end of page load.

Happy coding!

Show previous replies

Samuel Brown

Contributor ⭐️⭐️

Sorry to ‘re-open’ this discussion after so much time. What is described is literally the solution to my current problem, however, I’m really struggling to get this to work properly.

I’m trying to make it so that a div element appears under the Topic Sidebar when the category ID is 42. I’ve confirmed with the inSidedData area of the page that the ID is correct but the div still refuses to appear.

Taking the ‘if’ statement away shows that the script works so there’s something about that statement which is causing the problem.

What could I be doing wrong here? Any advice would be very much appreciated!

<script> 
 if (inSidedData.content.category.id == 42) { 
  var element = document.getElementById('register-side-widget');
  element.style.display = null;
 }
</script> 

<body>
<div id="register-side-widget" class="" style="display:none;">
   <h4>Register now</h4>
   <div class="html">
    <a href="/member/register" class="btn--cta btn--new-topic qa-topic-new-button">Make an account now!</a> 
   </div>
</div>
</body>

jvdc

Expert ⭐️

Hey! Love these tricks!

I am using them to only display items to guest users, and hide them once a user is logged in. But this means that it also hides these items when I am editing the layout… is there a way to make them appear when I am in edit mode of the page? (i could show them for users with role admin but that will show them also in the public view for these users)

Kenneth R

Expert ⭐️⭐️

@jvdc - Hmm I think you have a few options. When creating widgets for non-authenticated visitors, you could flip it around and hide the widget by default and then have bit of script that overrides and makes it visible for visitors that aren’t logged-in. I think that’s how I’ve mostly seen it done. You can then tweak the code while testing to only make it visible to admins instead. If you have a sandbox, that’d be the easiest place to test the layout, of course.

Daniele Cmty

Helper ⭐️⭐️

Hi there,
If I wanted to have an HTML widget that only shows when the topic creation date is e.g. more than 2 years old, how would I model the code?

Context for my use case:

judahs

Helper ⭐️

@Daniele Cmty the ‘created’ value in content > topic section of the inSidedData object is a unix timestamp that tells you when the topic was created:

inSidedData.content.topic.created

I am not a developer, but if you want to control the visibility of another element with that value, you could use some javascript to compare the timestamp to today’s date. The result of that comparison could determine whether the HTML vidget gets displayed.

So, for example, you could add the widget to the page but have it hidden by default, using “displaly: none;” in the stylesheet.

When the page loads you can check the ‘created’ value. It’s a unix timestamp, so convert that to a regular date first, then compare it to today’s date value. If that shows it is more than two years old, update the widgets css to ‘display: block’.

	const posted = new Date(inSidedData.content.topic.created * 1000); // this converts the timestamp to a regular date format
	const now = new Date();
	const twoYearsAgo = new Date ();
	twoYearsAgo.setFullYear(now.getFullYear() - 1);

	if (posted < twoYearsAgo) {
		const widget = document.getElementsByClassName('html-widget'); // this would be the classname of your html widget that you want to show for old posts
		widget.css.display('block');
	}
}

If you only want it to run on certain pages, you can also use the inSidedData object for that. You could only run it on topic pages, for example, by wrapping the whole thing in another condition:

if(inSidedData.page.name=='Topic') { // only run on topic pages

const posted = new Date(inSidedData.content.topic.created * 1000); // this converts the timestamp to a regular date format
	const now = new Date();
	const twoYearsAgo = new Date ();
	twoYearsAgo.setFullYear(now.getFullYear() - 1);

	if (posted < twoYearsAgo) {
		const widget = document.getElementsByClassName('html-widget'); // this would be the classname of your html widget that you want to show for old posts
		widget.css.display('block');
	}
  }

We are just in the process of migrating our community to Gainsight CC so I am not very familiar with all the different content areas yet, so that example may not be as relevant as I think it is, but hopefully it illustrates the idea.

This could be improved I’m sure by an actual developer, but it might be good enough for what you need.

What is the inSidedData object?

Ok this is great but what can I use this for?

Didn't find what you were looking for?

Sign up

Welcome to the Gainsight Community