Category: Front-End

Posted on

Full headless experiences with Sitecore Omni™

In the keynote during Sitecore Symposium 2018 in Orlando we introduced Sitecore Omni™, a range of products that support headless scenarios for the different business needs in digital marketing.

Sitecore Omni™ supports all headless scenarios including all author and marketer functionality that the Sitecore Experience Cloud offers, including inline editing, analytics, personalization, multivariate testing and Sitecore Cortex machine learning.

Headless is often positioned and offered as the solution for your digital marketing challenges; digital marketing challenges that are becoming more and more critical to solve.

Customers are expecting seamless experiences on every channel, both online and offline. Because of the exponential growth of the channels the digital marketing channel is are getting more complex.  There is no silver bullet headless approach, there is no single headless solution that fits all.
In the real world there are different customers, with different digital marketing challenges and business cases. These challenges often need a different (headless) approaches.

A headless approach can be the used from solutions where the CMS is only the content hub for a static Progressive Web App, it can be used to track offline customer interaction with IoT or build a full powered native mobile app with tracking and personalization. For all these business cases is the headless approach the correct one, but you can understand that the technical requirements and implementation are completely different.

With Sitecore Omni we introduce a range of products that supports the different headless scenarios.

Continue reading “Full headless experiences with Sitecore Omni™”

Posted on

Asp.Net: keyboard sort items

As proof of concept I wanted to sort images in a Grid by keyboard. The sort logic needed to be implemented on the server. My solution for this problem is a combination of Javascript and C#.

First add following html to you .aspx. Notice that the body tag has runat=”server” and a ID.
[code language=’html’]
<body runat=”server” ID=”bodyTag”>

[/code]

Now add the following JavaScript to your page. This script will fetch all keyboard input and press the corresponding button.
[code language=’js’]

document.onkeydown = checkKeycode
function checkKeycode(e) {
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
switch (keycode) {
case 37:
var obj = document.getElementById(”);
obj.focus();
obj.click();
break;
case 38:
var obj = document.getElementById(”);
obj.focus();
obj.click();
break;
case 39:
var obj = document.getElementById(”);
obj.focus();
obj.click();
break;
case 40:
var obj = document.getElementById(”);
obj.focus();
obj.click();
break;
}

}

[/code]

At last we need to add the following C# code to the page.
[code language=’c#’]
protected void Page_Load(object sender, EventArgs e)
{
//Ad clientside onkeypress event to the body
bodyTag.Attributes.Add(“OnKeyPress”, “keyhandlers()”);
}

protected void DownButton_Command(object sender, CommandEventArgs e)
{
//Just for testing
clickedLabel.Text = (string)e.CommandArgument;
}
[/code]

Enjoy, Pieter

Posted on

Playing with JQuery (fixing Intellisense in VS2008)

The last few years I spend a lot of time working with Asp.Net AJAX. It all worked pretty good, the only downside is that you do not have control the generated HTML. With jQuery you can manipulate generated HTML. This HTML can be generated fully controlled with a ListView.

I'm a lazy programmer so the first thing I needed to do is fix jQuery Intellisense in VS2008. I found my information for doing this on Scott Gu's blog (jQuery Intellisense in Vs 2008). Everything worked great the only bad thing is that my computer needed a restart after installing a Visual Studio Patch…

Now the Intellisense is working the only thing I need to do is blog some nice examples of my work! 😉

Cheers,

Pieter

 

Posted on

CSS: Place vertical text

For a html report I needed the Excel functionality to put text vertical. I didn't know that this was possible but it is.
Put the following code in your page (style in the style section of the head or style sheet of course).

[code:html]

.verticalTextBottomTop {
writing-mode: tb-rl;
filter: flipv fliph;
}
 
.verticalTextTopBottom {
writing-mode: tb-rl;
filter: fliph fliph;
}

<div class="verticalTextBottomTop" style="height: 200px;">Text verticalTextBottomTop</div>
<div class="verticalTextTopBottom" style="height: 200px;">Text verticalTextBottomTop</div>

[/code] 

To prevent word wrap you need to set the height property of the container.

And you get the following output.

IE7

FireFox

 

So as you can see It doesn't work for firefox. I can use it because my project is running under a controlled environment, where all users can only use IE.

Posted on

Asp.Net AJAX controltoolkit javascript funtions

I've search them all up for a 1000 times. Now I'm going to write them down as reference. This post will grow in the next few months.

Remember do not forget to set the behaviorId of the control. 

References:

CollapsiblePanelExtender
Expand:

  • $find('BehaviorId')._doOpen();

Collapse:

  • $find('BehaviorId')._doClose();

  • $find('BehaviorId').collapsePanel();

ModalPopupExtender
Show popup:

  • $find('BehaviorId').show();

Hide popup:

  • $find('BehaviorId').hide();