Publish Settings in DXA explained

DXA has few system pages like Html-design, _navigation and “Publish Settings”, out of these Publish Settings is the one which boots an DXA application and considered as the very important system page.

Publish setting provides intelligence to the MVC application to get it work faster and isolated from CMS.

How does it choose what to publish?

So DXA provides a schema called Module Configuration. Whenever a module is created, a component of this schema is created you define the module name, version and related dependencies of it.

Whenever Publish-settings is published. It searches for the all components created with this schema

& generate files which store as binaries in the Broker DB. Above picture is of Core component (Module-Configuration schema). If you see it has listed configuration and Resource dependencies of this module.

Files Generated –  (each files starts with its module name)

/System/config

-          Core.json  - Contains all the configuration values(combined)  from attached components above

-          Core.schemas.json – contains name and id of all the schema of this module

-          Core.taxonomies.json – contain all taxonomies of the system.

There is another file _all.json in this directory which actually list all above files and few other environment settings.

/System/Resources

-          Core.json – a combined file of the entire resource component attached in module configuration.

/System/Mappings

We can say it is master data of schemas & templates, this is not module dependent files but global files.

-          Schemas.json - it contains all the schemas’ definitions from the CMS.

-          Regions.json - it has details of all the regions and details of component template where it’s used, along with linked schema of CT.

-          Includes.json – it contains all the Page Template Ids and associated includes in that PT.

So lots of information required/used by DXA for various purposes.

It needs schemas. Json to map field values to the respective entity, Semantics and XPM in MVC application. So whenever there is change in schema you have to publish “Publish settings” page to reflect the change in application.

Some Tips:
Any change in schema CT’s Region and PT’s includes require users to publish this page. Otherwise you will spend hours to figure out where the heck are my changes.

When DXA boots it loads _all.json of config and resources to read all the respective files and download all these under BinaryData folder of your application’ root directory.

Semantic markup using Schema.org in DXA

What is Semantic SEO:  Semantic SEO is giving meaning to your  data embedded in the html Tags using some metadata. and which would be utilized by the search engine to index your page in better way.

Why do i care: Semantic SEO is hot topic these days because Google and other Search engine have updated their algorithm to consider and give little higher weight to pages having  semantic markups. It seems inevitable that including semantic mark-up tags in your html will become more important,  check this: Schema mark-up rank higher in SERP’s.

What is Schema.org
Schema.org  provides vocabulary to give semantics to your html tags , which is supported by  Google & Bing. You can find out schema from schema.org for your particular entity and tag the content with that to give it a meaning.
schema.org standards allows specified entities such as products, places or people to be identified in your HTML with different attributes.

Example: Markup with semantic attributes

<div prefix="s: http://schema.org" typeof="s:Movie">

<h1  property="s:name">Avatar</h1>
  <span  property="s:genre">Science fiction</span>
</div>

On inspecting above tags, you will find out above details have been given meaning by adding those attributes (bold). so without this any search engine can't distinguish between what is above information exactly. Now Search engine knows its A movie which has name Avatar, and its a Sci fiction.

Without semantics Google may have index it as book, some mythological character etc. but now its has specific meaning and that's the purpose of Semantics SEO and Schema.org.

Formats: Schema.org just provided the vocabulary or schema to give meaning to your information, but hows this vocabulary is attached to content is , where format comes to the picture.
following are the main formats using which we can tag our content.

• Microdata
• RDFa
• JSON-LD 

DXA and Semantic SEO : 
DXA makes life very easy for us to add those ugly semantics markups into your html tags. Its very good feature which comes OOTB in the DXA all version.

DXA default Implementation: DXA comes with RDFa Lite implementation.  RDFa Lite consists of five simple attributes; vocab, typeof, property, resource, and prefix. so its lite version of RDFa which i mentioned in the list above.
if you want to use any of other format in your code, then you have to implement it.

[SemanticEntity(Vocab = "http://schema.org", EntityName = "Movie", Prefix = "s", Public = true)]

    public class Movie: EntityBase

    {

        [SemanticProperty("s:name")]

        public string Name { get; set; }

         [SemanticProperty("s:genre")]

        public string Genre { get; set; }

    }

SemanticEntity -:  This attribute actually defines which Vocabulary you are going to use
EntityName: Entity name from specified Vocab. Name is one of schema in Schema.org
Prefix: kind of namespace. so if you define multiple formats , Vocab on the it. it would help to differentiate.
Public=true/false:  Semantic attributes will only be applied to markup if Public=true, otherwise it will be ignored.
SemanticProperty: Name of  Entity properties has to match with the name defined in schema.org/Movie only then it will add meaning and will be used by Google to index.

<div @Markup.Entity(Model)>
  <h1 @Markup.Property(Model, "Name")>@Model.Name</h1>
   <span @Markup.Property(Model, "Genre")>@Model.Genre</span>
</div>

so when this is executed, it will give output  as shown above.

Semantics markup Validation using Google structure testing tool; developers.google.com/structured-data/testing-tool/

Social connect Module for Dxa - Internals - Part 2

Social connect Module was developed using Microsoft's OWIN implementation, which actually make it easy to write code.

Nuget packages

 <package id="Microsoft.Owin" version="3.0.1" targetFramework="net45" />  
  <package id="Microsoft.Owin.Host.SystemWeb" version="3.0.1" targetFramework="net45" />
  <package id="Microsoft.Owin.Security" version="3.0.1" targetFramework="net45" />
  <package id="Microsoft.Owin.Security.Cookies" version="3.0.1" targetFramework="net45" />
  <package id="Microsoft.Owin.Security.Facebook" version="3.0.1" targetFramework="net45" />
  <package id="Microsoft.Owin.Security.Google" version="3.0.1" targetFramework="net45" />
  <package id="Microsoft.Owin.Security.OAuth" version="2.1.0" targetFramework="net45" />

Startup.cs
This is most important file of the module. it plugs the module in mvc lifecycle to ensure user is logged in and prompt whenever required for login.

 [assembly: OwinStartup(typeof(Sdl.Web.Modules.Social.Startup))]  

startup.cs has method ConfigureAuth which has responsibility to Register Social networks and add required claims to be returned by the respective social network.

upto now, no Dxa involvement was required but now will start integrating Dxa step by step.

SocialController :
This controller acts as main interaction of the system. it triggers following as per the Component template of the module

• Show the Social network options to user
• Trigger required social network to prompt for credentials
• Receive token from Social network to validate it & Read the claims and show log out options.
• Log outs from system

for above 4 set of activities we need different Component templates.

For last three activities three different pages have been created so that only specified activity is triggered as per the need of user. First activity is part of Header page.

If you need to retrieve authentication status or User information following can be used.

• Request.IsAuthenticated
• User.Identity.GetUserName()

Packaging an SDL DXA Custom Module

SDL has provided good API's to develop an DXA module. I have recently published two modules

• JwPlayer Module
• Social Connect/Login Module (updated)

Though creation of module is of medium complexity but packaging of module is also not easy. so i had hard time initially packaging a module. 

Packaging essentially means providing CMS and CD part in one zip file with respective power-shell scripts to automate the installation on CMS(via calling core Service) and deploying the necessary files on the website. 

CM Part- CM part is where building blocks along with required components, content porter package is created. it has three parts

•  Import Export folder - Where SDL provided Dlls and powershell scripts are kept which helps in importing the module.
• Content Porter Package -  To Export content porter package
• Do not select dependencies
• Select all required component and pages at website publication only, with setting select folder and all children. in this way only small package with required items will be created.
• Custom Export Power shell script - 
• Download some existing DXA module
• Take script of that
• and do required modifications

CD Part - 

• Copy your Area and respective views
• Copy required dll into Bin folder
• Use existing power-shell script from some module
• if you have custom setting like. web.config to update etc. then write the required power-shell script. refer my social login module for that. 

now try above and zip it for delivery.

Social connect module for DXA - Part 1

 recently published Social Connect module for Digital Experience Accelerator. which extends Dxa to login using social network.

Currently this module supports two social networks

• Facebook
• Google Plus

but i will try to add Twitter and linked-in later.

After installing this module you will find login link on your Dxa menu.

 

After click on the Login link you should find below option to select.

After clicking on above e.g Facebook. Facebook will ask for Credentials to enter. after successfully validating. Facebook will return back to Dxa application with token and other details in form of claims. 

Custom modules will receive inputs from the Facebook and accordingly update the UI with logged in name and logout link.

Similarly when after clicking on Google, it will take you to Google login and ask for credentials and OTP. and take back to application with claims. claims are processed and use is logged in.

To achieve above there are few settings to be done at Facebook and Google console where return URL etc are returned

Google requires to create credentials at https://console.developers.google.com

• Create Auth 2.0 Client-id
• Give it a name, 
• Mention Return URL of your application, which will receive the token after successfully authenticated by Google.
• for Google default URL will always be http://your-domain/signin-google.
• 
  

I tried to have other endpoint as well but did not work for me so i kept default Url for my testing.

Similarly for Facebook you have to create new App and provide your site's Domain and URL. it will also redirect on your siteurl on a default page with name: /signin-facebook again Owin automatically intercept this and accordingly validate the token and proceed to next steps.

Custom Dxa Modules Creation - Presentation

SDL Web 8 Developer Summit  2016 was second event in India and was really enjoyed by 50+ Audience including few Mvps including Nuno and Bart. Two days event was a great success.

All the goodies were great especially Pen drive.

I presented step by step way to create Dxa modules. which was really appreciated by all especially Nuno. I am sharing here my slides below for benefits of others. We will come with next season of summit next year as well.

Step By Step Dxa Module creation from Raj Mittal

My First DXA Module - JWPlayer - Steps by Step - Content Delivery

In last post, i detailed my experience on the CMS Part of the DXA module. In this post i will explain the CDA part

Visual Studio Solution: In Asp.net MVC each Module is separated by respective Area in the project. There are different ways to set your solution.

• Use exiting DXA project and create required Area using Mvc ' Add Area..
• You can use Visual studio extension for DXA to add, required files e.g Registration and Modle classes.
• I find it easy to add above in existing DXA website, as it make me easy to debug and go ;)

Structure of  this plugin

so when we add new Area all the above folders, except Entity are automatically created along with web.config and JWPlayerAreaRegistration.cs file. 

Step by Step changes:

1. Create Model class which will be used in the ViewModel and carry the data from component of JWPlayer Schema.

so here i have mapped all fields of schema to this ViewModel.

2.  Create view which will use above model and render the JWplayer Video. the name of view should match with one given in CT's metadata.

3. Update JWPlayerAreaRegisteration.cs so that it inherits  from  Sdl.Web.Mvc.Configuration.BaseAreaRegistration class

and overrides the RegisterAllViewModels method to register above view and view-model in view-registry. see below image , This is again very important step

 Now time to compile and test the module.

You will see following output.

You can see JWPlayer logo on top the the video. this is there as i have not used any valid key for it.

So we are done with the working DXA module step by step. 

Now time to bundle this module using Powershell scripts and submit to the Gallery where people can use and improve it. 

I will also send pull request on GIT to open source the code.  

I have listed out the features  for next version, which i will definitely work in 2016. Stay tuned for that.

Happy new year!!

My First DXA Module - JWPlayer - Steps by Step - CMS

DXA Modules allows us to extend its Functionality via providing new modules. Making separate modules for functionality gives flexibility & re-usability. Independent release of the modules can happen without concerning about the main DXA version and developer can develop their modules and publish at DXA Module repository.
I was very impressed by the DXA modular approach and framework when Bart shown us the slides in last MVP meet. This modular functionality is near similar to WordPress plugin world, where you can download thousands of plugins. Right now downloading in Dxa is not that smooth because nature of the complexity of Tridion vs WordPress and its just start, but i hope SDL will make it smoother in next releases and Alchemy.
btw wordpress also has JWPlayer plugin :)

Each DXA module has primarily two sections.

1. CMS
2. CD

CMS Part

•  Define module's folder structure
•  DXA has a predefined structure for putting all the building blocks of the module.  
•  For each new DXA module, we need to create a new folder in Modules Folder
• The name of folder is usually module name.
• In Admin folder of module(JWPlayer) , a component of Module Configuration schema is created  
• Site Manager usually contains Schema and Template to be controlled by Site manager.
• Settings also have similar folder as in Module but it just contains component etc for defining any settings.

Module Configuration: This is the Mandatory details of the Module

 

• Module Name: Defines a unique name of this module
• Version to track any updates in future
• URL for additional details
• Active: never used it, but to enable disable the module
• if  you module is dependent on any other module, so far i have seen only Core here
• Any settings component is attached here in "Further Configuration section"
• After setting there is resource section. if you have any resource do attach the resource component there.

i have attached JWPlayer Configuration Component of JWPlayer Configuration Schema, which contains one field for JWPlayer Key.

Schema

I have created another schema "JWPlayer"

This schema will be used by Editor to define the JWPlayer Video components with required Video details and attached to desired page.

Component Template:

I have created a new CT (JWPlayer) to be attached with component of above schema  and following are the metadata settings of it

Entity View Name : Value for Area and View name which will render this CT.

Region Name: Section name of webpage where this CT needs to be rendered. i wanted to render it on home page so used this. but can can be any new region as well.

So we are done with CMS part of the Module. now time to publish.

• Publish settings
• Home page

Comparison of different DXA version.

DXA new versions are being released with quite a good pace, i think each quarter they are releasing new version. so far 1.01, 1.1 and 1.2 are released. Bart & his team doing very remarkable job in it. when i first time used DXA 1.01 there were numbers of bugs in it, but in each version its improving. its making development very rapid.  I am here trying to summarize what each release of DXA brings to table.

	DXA 1.01 (STRI)	DXA 1.1	DXA 1.2	DXA 1.3 (not released yet, may change)
Release Date	Sep 2014	Aug 2015	Nov 2015	Expected (Jan/Feb 2016)
DD4T version	1.31	1.31	2.0	2.0
Tridion Version	SDL Tridion 2013 SP1	SDL Tridion 2013 SP1 HR1	SDL Tridion 2013  SP1 HR1	SDL Tridion 2013 SP1 HR1 & SDL WEB 8
.net framework	4.5.1	4.5.1	4.5.1	4.5.2
Official Modules	Google Analytics Search	- GA - Search - Smart Target - Media Manager	- GA - Search - Smart Target - Media Manager
Asp.net MVC	MVC 5	MVC 5	MVC 5	MVC 5
Changes		·Improved support for creating Modules ·Solutions changes and Refactoring of code Better Performance Improvements in handling Media Items. Page Includes as Region No separate installation of Node js required, its included. Html-design splitted into two files , 1 for fixed grunt modules , 2 for app related css, js etc. Updated Syntax for rendering region and markups	Support for java Improved media Manager module ECL Data Support Https Support in installation

Donut caching using Outputcache with DXA

Donut caching is the best way to cache an entire web page except for one or more parts of the web page. unfortunately post asp first version asp.net do not provide any good way to implement it.

I required to implement it in my project as i want all CMS pages to be cached except for the dynamic login and other sections. As DXA 1.2 has single method to process pages in Page Controller, and DxaEntity for component presentation. so if you apply OOTB Asp.net Outputcache attribute to it. it will cache entire page including the dynamic sections.

While searching for solution i come across the DevTrends' library which enables Donut caching Asp.net mvc solutions. i downloaded it from NuGet. using "install-package MvcDonutCaching" but could not use as it is because this library Serialize all the parameters passed in htmlAction method.

MvcHtmlString result = htmlHelper.Action(actionName, controllerName, parameters);

Code Change in Library
but problem with this is, the last parameter contains object of DD4T's ComponentPresentation class. so serialization fails while complaining about "no knowledge of this class". so i had to download the Source code of this library and add the reference of "DD4T.ContentModel" and then provided class in question as known type of Serialiser.

public ActionSettingsSerialiser(){_serialiser = new DataContractSerializer(typeof(ActionSettings), new[] { typeof(RouteValueDictionary),typeof(ComponentPresentation)});}

Code Change in DXA Library
Donut Library provides overloads of all methods in Helper.Action method, it provides a additional Boolean parameter which accepts whether to exclude the view from cache or not.

• Refer the namespace of the library in Sdl.Web.Mvc.Html.HtmlHelperExtensions
• Add optional parameter in following method.
  - MvcHtmlString DxaEntities(this HtmlHelper htmlHelper, int containerSize = 0, string excludeCache = null)
• And following changes in  DxaEntity  

• public static MvcHtmlString DxaEntity(this HtmlHelper htmlHelper, EntityModel entity, int containerSize = 0, string excludeCache=null)
• bool excludeFromCache = (mvcData.ViewName.ToLower() == (excludeCache!=null?excludeCache.ToLower():string.Empty)); 

• MvcHtmlString result = htmlHelper.Action(actionName, controllerName, parameters,excludeFromCache)

so i have added a optional parameter in the DxaEntities and DxaEntity Method, if any of the view is required to be excluded from the parent cache, just provide the name of the view.

It will match the viewName if it matches, then true is passed in the HtmlHelper.Action method and exclude this view from the cache.

Change in PageController or you can override the method.

[DonutOutputCache(CacheProfile = "Cache1Hour")]
        public virtual ActionResult Page(string pageUrl) 

web.config settings.

    <caching>
      <outputCache enableOutputCache="true"/>
      <outputCacheSettings>
        <outputCacheProfiles>
          <add name="Cache1Hour" duration="0" location="Server" />
        </outputCacheProfiles>
      </outputCacheSettings>
    </caching>

Profiling and Personalization using Target Groups in DXA DD4T

Profiling and Personalization aka P&P is very useful feature of Tridion. User's behavior can be tracked and user can be targeted with set of content.

In this post i am going to detail P&P custom characteristics use with DXA and DD4T. We started with SmartTarget evaluation but due to license cost and hardware requirement for Fredhopper caused us to evaluate this Out of the box feature of Tridion to use with DXA.

P&P provides basic but very useful personalization features. 

1. Tracking Keys
2. Custom Characteristics

Tracking Keys: Tracking keys are used for Implicit Personalization. Using these  you can can track interest as user visits various content. This functionality works on the tridion Category/keywords. Editor add the "Activate tracking" tbb  in the page template and add the category for tracking in CT's Tracked Category.  Schema should also be added to the component also. publish the page.

On your presentation side custom code has to be written using WAI to track the activities. 

Custom Characteristics:  CC are  used for Explicit Personalization. User information for targeting can be collected using some form e.g. gender, age, city, country. This information can be persisted in the broker db for further use.

Steps to use CC

Page Template Change

Include dd4t tbb "Add Target Groups" on the page template.

Define TargetGroup : 

• Right click on folder and select  TargetGroup.
• Set the characteristics as shown below.

• TargetGroup can only be assigned to component Presentations. Lets do it & Publish the page.
  
  
  

XML: 

After publishing page, DD4T page xml will contain Condition need under Component-presentation node.

<Page>

.

.
 <ComponentPresentation>

.

<Conditions>

        <Condition d5p1:type="CustomerCharacteristicCondition" xmlns:d5p1="http://www.w3.org/2001/XMLSchema-instance">

          <Negate>false</Negate>

          <Name>city</Name>

          <Operator>Contains</Operator>

          <Value xmlns:q3="http://www.w3.org/2001/XMLSchema" d5p1:type="q3:string">Mumbai</Value>

        </Condition>

        <Condition d5p1:type="CustomerCharacteristicCondition" xmlns:d5p1="http://www.w3.org/2001/XMLSchema-instance">

          <Negate>false</Negate>

          <Name>city</Name>

          <Operator>Contains</Operator>

          <Value xmlns:q4="http://www.w3.org/2001/XMLSchema" d5p1:type="q4:string">Delhi</Value>

        </Condition>

      </Conditions>

    </ComponentPresentation>

.

.

</Page>

Presentation server

Here XML is de-serialized to c# object

Note: Current DD4T 1.31 which is part of latest  DXA has bug , because of that XML-with- -conditions-tag de-serialization fails.As this is fixed in DD4T 2.0 so i used some code from 2.0 version and fixed it.

When user access the website where we have WAI module configured

• Cookie is generated with USER_ID key. 
• If you have non-login website this USER_ID is generated automatically by WAI
• You can write custom logic to update the USER_ID with your website user_id

There is no OOTB code to work on Conditions on DXA/DD4T, so you have to write custom code to remove the component presentation where condition fails.

Example user is not from Delhi or Mumbai. then delete that component presentation. 

 var  waiPage= new WAIPage(page.Id, this.HttpContext.ApplicationInstance.Context);

            CustomerCharacteristics cc= new CustomerCharacteristics(waiPage.User);

            var city= customerCharacteristics.GetValue("city");

            if (string.IsNullOrEmpty(city))

            {

                cc.SetValue("country", "Kolkata");//this city may come from your Geolocation module.

                cc.ExecuteUpdate();

            }                                                                       

           foreach(var cp in page)

            {

                foreach(var condition in cp.Conditions)

                {

                    if (condition is CustomerCharacteristicCondition)

                    {

                        

                        var ccCondition= (CustomerCharacteristicCondition)condition;

                        var node = (XmlNode[])ccCondition.Value;

                        string city= node[2].Value;       

                                    }

//now you can remove the component presentation here whereever conditions does not match.

                }

            }

now updated page is processed further via DXA for generation of views

DXA aka STRI - My Tiny step in Tridion (SDL Web) Reference implementation.

What is in name? as told by a Great Author and a famous community Builder

STRI - SDL Tridion Reference Implementation: Tridion development is usually considered complex and time consuming, also there is learning curve understanding bits any bytes of it. so few Tridion MVPs came together and developed this MVC based solution to make Tridion development bit easy and fast. STRI provides lots of modules out of the box,  which  are usually required for most of the sites.

In under-hood it uses DD4T as default, but you can extend and create your own custom framework if any and use it instead. so all the template work which usually take more time, which includes DWT/Razor, C# tbbs etc, can be developed in MVC with ease.

DXA - Everything is same just a rename. so new name is Digital Experience Accelerator

Each individual community framework and modules,used in DXA, should be supported by their respective owner or community (wherever applicable.)

Note: You might be thinking its just an DD4T. as i mentioned above  DD4T is just another module in DXA, but yes big module along with other useful modules and features e.g

1. Google Analytics
2. Solr Search using SI4T framework
3. Language Selector
4. XPM Ready, Yes your site is XPM ready from start, no longer  phase 2 stuff now :)
5. Navigation and breadcrumbs
6. Image Resizing
7. Responsive Design using bootstrap

...Many more...

sample site comes with lots of modules integrated for reference. just install and diggit.

Download DXA/STRI