Disable SXA partial design rendering according to the request origin

Background :

Hi there ! few weeks ago, i wrote this post to show you how to retreive media informations with a public URL. This need was requested by our mobile apps team.

The same team wanted to display our Sitecore websites on webview in mobile application. So they asked me if it is possible to display Sitecore websites without header and footer.

What does this mean exactly ?

• The website should be displayed without header and footer when the call come from mobile application
• The same website should be displayed normally, with header and footer when the call come from a browser.

Request origin detection :

We decided to use User-Agent as key information to differentiate between call coming from mobile application and browser.

with the mobile team, we agreed on a known User-Agent (e.g: appName-UA). This User agent is sended by the mobile application in the request header.

SXA page design rendering :

To understand how the SXA add page design to pages, i have decompiled some DLLs and i founded AddPartialDesignsRenderings. This class is responsible for page design and partials design rendering. Excalty what i need 🙂

The idea now is to extend this class to be able to do somes actions when the call come from mobile application.

What we need to implement the solution ?

• Custom page design template that inherit from SXA Page Design
• Custom AddPartialDesignsRenderings pipeline that extend the native SXA one
• Sitecore configuration to call the new pipeline

Wait ! but why i need custom page design item ?

If the goal is to not display header and footer, i just need to bypass adding partials design the page in my custom pipeline and it should be ok, right ?…not so simple as that.

To have a responsive design i need to have metadata on my page especially this one :

<meta name="viewport" content="width=device-width, initial-scale=1">

Therefore, i need a partial design item for “webview” that contain only the metadata as partial design and of course without header/footer partial design.

let’s go to implementation :

Sitecore items side :

To avoid to override the SXA templates, we should create a custom page design template with a checkbox field to differentiate it from others designs. I called this field “isWebView”. This template should inherit from the SXA page design template : /sitecore/templates/Foundation/Experience Accelerator/Presentation/Page Design

Now, we have to create a new page design item under the page design section from the template newly created and select only the metadata part on the right. As you can see, no partial design for header and footer added to this page design.

Ensure that the checkbox is enable.

Solution side :

I created a custom pipeline “AddPartialDesignsRenderingsExtentions” that inherit from SXA pipeline “AddPartialDesignsRenderings”.

Finally, we have to patch Sitecore configuration with the new class on Sitecore.

 <mvc.getXmlBasedLayoutDefinition>
        <processor type="Demo.Foundation.SitecoreExtensions.Pipelines.WebView.AddPartialDesignsRenderingsExtentions, Demo.Foundation.SitecoreExtensions" patch:instead="processor[@type='Sitecore.XA.Foundation.Presentation.Pipelines.GetXmlBasedLayoutDefinition.AddPartialDesignsRenderings, Sitecore.XA.Foundation.Presentation']" resolve="true" />
 </mvc.getXmlBasedLayoutDefinition>

Enjoy 🙂