I’ve always been an advocate for using CSS to control the visibility of out-of-the-box Power Apps Portals features. Unfortunately, sometimes CSS isn’t enough, and you do have use JavaScript. And even then, sometimes you have to resort to some exotic techniques – one of those times is customizing some aspects of notes and activities are rendered on Power Apps Portals.

It all started with this question on the Dynamics community forums – someone wanted to know how to hide the Created By value shown when rendering the Timeline on an Entity Form. The initial question could be easily solved using some CSS. However, a different user had a follow up question that wasn’t so straight-forward.

When rendering certain activities on the timeline, by default a From and a To field are displayed, separated by an arrow. The user wanted to hide the arrow and the To field, but still display the From. In the below screenshot, they wanted to hide the arrow and SYSTEM from the first line, but leave Nicholas Hayduk:

It seems like something that should be simple to do, but unfortunately when you look at the markup, it’s not so simple:

<div class="from">
	<h5>
		Nicholas Hayduk
		<span class="glyphicon glyphicon-arrow-right"></span> SYSTEM
	</h5>
</div>

Hiding the arrow is straight-forward – this can be done using the following CSS:

.notes .note .from span {
	display: none;
}

But since the other text is not wrapped in an element, there is no way (that I know of) to target the text after the arrow to hide it with CSS. Anything we apply using CSS will apply to both the From and the To field.

In theory I could do a hack where I “cover” the text by using CSS to place an element over top of it that has the same colour as the background. But just thinking about a solution like that makes me feel dirty.

JavaScript to the Rescue – Eventually

So, with CSS not giving me an acceptable answer, I moved on to JavaScript. Shouldn’t be too hard to wipe out some markup with JavaScript, right?

The problem is this markup is not regular markup – it doesn’t exist in the response provided by the server. Instead, the timeline is placed on the page using Handlebars, which is a templating engine for JavaScript (think Liquid, but client-side). Typically you’d put your JavaScript to modify the markup in the $(document).ready function – however that’s where the processing for Handlebars takes place as well, and it involves asynchronous calls back to the server, so the markup doesn’t exist yet at that point either. Handlebars also doesn’t provide us with any sort of event for when the rendering is done, so without putting in some sort of ugly polling, it’s tough to tell when the markup we want to get rid of is actually there. So what can we do?

Thankfully, the Handlebars template is something that is included as part of the initial response from the server. So by modifying the template itself, we can achieve the desired results. Here’s the code to do just that:

$('#notes-template').html( $('#notes-template').html().replace(/ViewFields.to/g, 'ViewFields.somethingelse'));

The Handlebars template is located in a <script> element with an ID of notes-templates. I’m using a simple string replace to find references to ViewFields.to and replacing them with ViewFields.somethingelse, which is a field that doesn’t exist and so won’t render anything. Note that if you are displaying Phone Calls on your portal, you’ll still need the above CSS to hide the arrow, as this is the one case in the template where the display of the ViewFields.to fields isn’t conditional on it having a value.

Putting that in the Custom JavaScript of your Entity Form should do the trick – you don’t need to put it in the $(document).ready as we want the Handlebars template updated as soon as possible.

If you’re looking to make other changes to the look and feel of timelines, this technique should help you out.