Surendra Sharma

Surendra Sharma

Search This Blog

Saturday, September 24, 2016

How to Architect a high-performing and scalable Sitecore environment in the cloud


This is regarding attended webinar "How to Architect a High-Performing and Scalable Sitecore Environment in the Cloud" by Torry Williams, Senior Cloud Architect.

Below are the points covered by speaker.

Sitecore Development Options
-      Physical Servers
  • Good for : hybrid environments, database workloads
  • Dedicated resources built for unique environment
-      Public Cloud
  • Good for smaller, separated Sitecore roles
  • Cost effective & scalable
-      Private Cloud
  • Good for security conscious virtual SC deployments
  • Secure & efficient
-      AWS/Azure
  •  Good for: clients wanting yo move to hyper scale public cloud
  • Sitecore design & management expertise applied to AWS/Azure infrastructure
-      Colocation
  • Good for those who prefer to managing the environment
  • Client responsible of server configuration, proactive support and continuous business planning

According to Torry - Hybrid combination is the best.

What is scaling?

The ability of system, network or process to handle a growing amount of work.
There are two types of scaling

·         Horizontal scaling: adding or removing compute nodes
o    Example-Admission time in college, xMas, new year, Offer period, Holiday time etc. increase the traffic on website.
·         Vertical Scaling : adding or removing resources from a single node

Sitecore working depend upon its server roles and each role can be configured individually on distributed basis such as we can have different server for CD, session, collection, reporting, CM etc.

We can increase or decrease configuration of any particular role depend upon its usage

Example :-
If your management want daily or hourly reports, then you need to increase processing/aggregation role.

If there are 50 Content Editor, then you have to increase CM role.

If you have very heavy visitors traffic, you have to increase CD roles.

You can combine two roles but over the time period when user grow or more traffic, you may need separate it out.

Understand business requirement
  •  Define success
  • What problems are we trying to solve
  • How is sitecore being used to solve them?
  • Who are internal users - Marketing, sales, accounting, Management (etc.) 
              ·         How is Sitecore being used by each department? 
              ·         How often is reporting data required?

Understand The environment
  •  Questions to size your cloud environment
  • What SItecore version and modules are you running/considering?
  • Are you utilizing a CDN?
  • Are you utilizing a search service like solar or Lucene
  • What is your tolerance for downtime? (HA - High Availability / DR)
  • Number of contacts in your xDB?
  • Request per second?
  • Average page view per session?
  • Session duration in seconds?
  • Session end overhead?
  • Estimated session size?

Session and collection DB are heart of Sitecore experience.

Use MongoDB for Session State instead of SQL server because of its ability to handle large amount of users and data.

Session can be of two type - Shared or private. If you have multiple CD then go for Shared Session state.

Always keep auto scale server configuration, in case if you need more server resources you can upgrade them anytime.

You can setup your CD/CM environment with single CD server, Single Load-Balanced CD server, Two Load-Balanced CD server.

You should choose cloud environment for deploying your Sitecore solutions. 

Why Cloud
  • Simplified installation & configuration
  • No specialist knowledge needed
  • Global distributed data centers
  • Automatic backup
  • No need to manage scalability
  • Security - spread across multiple locations

 Please leave your comments or share these tips if it’s useful for you.

Sunday, September 18, 2016

Learning Lesson - How to add button in Sitecore ribbon and show page in model dialog box



Requirement:-

Daily mails are triggered by scheduler in one of our project for blogs. For the client prospective it is working great but they still want to preview a mail related with blog while working in Sitecore content editor area. 

We plan to provide custom button in ribbon in Sitecore content editor and when user clicks on it, Sitecore open a model dialog box with HTML email content for the selected blog item in content editor area.

What is ribbon in Sitecore?

When you logged into Sitecore content editor, a top region show a ribbon. There are different terms associated with ribbon like chunks, different controls, ribbon, reference etc.

Ribbon contains Stripes which contains Chucks and chunks contains different controls as shown in below image

Sitecore Ribbon
Sitecore Ribbon

How to implement it?

We will learn below lessons in this article to complete this requirement.
  • How to add buttons in Sitecore ribbon?
  • How to register event with Sitecore ribbon buttons?
  • How to get selected item of content editor area?
  • How to open particular page in model dialog box in Sitecore?
  • Complete Code
  • Preview Page
  • Testing


How to add buttons in Sitecore ribbon?
  • Log in to Sitecore desktop mode.
  • Select CORE database
  • Open content editor
  • Add a chunk item under “/sitecore/content/Applications/Content Editor/Ribbons/Chunks” which should refer template “/sitecore/templates/System/Ribbon/Chunk”. I have added “Mail Preview Section” and assign some name in “Header” field like “Mail Preview” as shown below
Chunk
Chunk

  • Add some control into this chunk section. Right click on above created chunk and insert item from template and choose the control that you want. Sitecore provide different controls as shown below

 
Ribbon Controls
Ribbon Controls

  • In my case I have added “Preview” large button item under “/sitecore/content/Applications/Content Editor/Ribbons/Chunks/Mail Preview Section” item which inherited from “/sitecore/templates/System/Ribbon/Large Button” template. 
        Fill content in Header, Icon and click field of this button item as

Large Button
Large Button
 
I put below content in mentioned fields
Header -> Preview
Icon -> Applications/32x32/view.png
Click -> mailpreview:previewbutton [You can assign any text here which is separated by “:”. We need this value while registering click event]

  •  We have created chuck section and its controls. Now we have to add this chuck into one of the ribbon stripe item. I am adding it into Home stripe.
  • Right click on “/sitecore/content/Applications/Content Editor/Ribbons/Strips/Home” and add an item which inherited from template “/sitecore/templates/System/Reference”. Set its “Reference” field to our created chuck “/sitecore/content/Applications/Content Editor/Ribbons/Chunks/Mail Preview Section” as
 
Adding Reference
Adding Reference





  • After this step you should be able to see “Preview” button in ribbon under “Home” as

Preview Button
Preview Button


Till now we have completed all required things from Sitecore content editor point of view.


How to register event with Sitecore ribbon buttons?

On click of “Preview” button we need to fire some event. For this put below code in your Visual Studio project

using Sitecore.Shell.Framework.Commands;

namespace SitecoreLessons.UI.CustomCode
{
    /// <summary>
    /// Show mail message on click of Sitecore ribbon Preview button in Home toolbar
    /// </summary>
    public class SCCustomButton : Command
    {
        /// <summary>
        ///
        /// </summary>
        /// <param name="context"></param>
        public override void Execute(CommandContext context)
        {
            //We will write our code here
           
        }
    }
}

Open “\Website\App_Config\Commands.config” file and make entry of this class with your button click value as

<command name="mailpreview:previewbutton" type="SitecoreLessons.UI.CustomCode.SCCustomButton,CustomRibbonButton" />

Where
name = click value of large button
type = Namespace.ClassName, AssemblyName

How to get selected item of content editor area?

In our execute method, we will get CommandContext context. This context contains an information about selected item in content editor as

context.Items[0].ID.ToString()

How to open particular page in model dialog box in Sitecore?

ShowModalDialog() is available to open model dialog box in content editor section as

Sitecore.Context.ClientPage.ClientResponse.ShowModalDialog("/previewpage.aspx?myid=" + context.Items[0].ID.ToString());


Complete Code

using Sitecore.Shell.Framework.Commands;

namespace SitecoreLessons.UI.CustomCode
{
    /// <summary>
    /// Show mail message on click of Sitecore ribbon Preview button in Home toolbar
    /// </summary>
    public class SCCustomButton : Command
    {
        public override void Execute(CommandContext context)
        {
            //Make sure the blog items is selected
            if (context != null && context.Items != null && context.Items[0] != null
                && context.Items[0].TemplateID.ToString().ToLower().Equals("{0437fee2-44c9-46a6-abe9-28858d9fee8c}"))
            {
                //Open the preview page and pass blog item id
                Sitecore.Context.ClientPage.ClientResponse.ShowModalDialog("/previewpage.aspx?myid=" + context.Items[0].ID.ToString());
            }
            else
            {
                //Show message for any non blog items
                Sitecore.Context.ClientPage.ClientResponse.Alert(context.Items[0].DisplayName + " is not a blog type item.");
            }
        }
    }
}

Preview Page

Create preview page and write your logic inside that for constructing HTML message as

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Mail Message Preview Page</title>
    <script language="c#" runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
      this.Literal.Text = string.Format("<p><h2>Put your HTML Mail message Body here for blog item </h2> {0} </p>", Sitecore.Web.WebUtil.GetQueryString("myid"));
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:literal id="Literal" runat="server"></asp:literal>
        </div>
    </form>
</body>
</html>

Note :- Use MVC view rendering for better and clean HTML generation.

Testing

After all these steps, you should get below output on click of “Preview” button.

A below preview page should display for all valid blog item.

Mail Preview Page
Mail Preview Page


A below message should be displayed for all other items as

Sitecore Alert Message
Sitecore Alert Message


Hurreyyy. We learn another great customization feature of Sitecore.

Please leave your comments or share this learning lesson if it’s useful for you.