Sitecore's Speak: A Custom Component Part 3 - Final Steps

In the first blog, we looked at WebAPI and data preparation for the Speak components.  In the second, we looked at the component creation, from CSHTML to Javascript.  Now, we will look into tying everything together on the Application page to create a responsive, interactive interface for the user.  

Before started, I would recommend watching the videos by The Rocks Guy on YouTube, specifically Part 5 on Datasources.  

Afterwards, add the text, textbox, checkbox, button, list, and search user database controls to the page layout.  The resulting layout will look something similar to this: 

Next, you must bind the fields of the Search User Database control.  The resulting binding will look something similar to this:

The Items field of the List Control must also be bound to the Items property of the Search User Database Component (along with the Record Count text to the Count property of the same component). 

The final step of making this control functional is setting the Page Settings detail of the List Control component.  Here is where you will add the columns shown in the results page.  This works just as described in the YouTube video above, only in our case we will use the Custom Components properties: Domain, Email, Name, and Username.  You can add more, or less, if you would like, but they must correspond to the data object UserData created in Blog #1. 

The resulting application will look like the following image.

There are two other buttons on the screen not discussed yet during these blogs.  Those are the Instructions "Drop Down Button" and the Download "Button."

The Instructions button works as a drop down container where, when clicked on, a window will drop down and show the user the value entered in the text field of the component.  I, like a few others, originally thought this was a drop down list container, and was confused by the lack of an "Items" field.  However, this was simply meant as a container for text.

The Download button, on the other hand, has a specific click event set to get a file via webservice upon clicking the button.  In this case, the click event is set to "javascript:window.open('/api/user/getexcelfile', '_self');"

The data returned by this call is the data related to the csv file requested (using the session variable set in Blog 1).  

public void GetExcelFile()
{
  var list = (List<userdata>)HttpContext.Current.Session["lastSearch"];
  if (list != null)
  {
    HttpContext.Current.Response.ContentType = "text/csv";
    HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment; filename=ExportResults.csv");
    HttpContext.Current.Response.Write(ExcelService.ExportTableToCsvString(list.ToDataTable(), true));
    HttpContext.Current.Response.End();
  }
}

        public static string ExportTableToCsvString(DataTable table, bool printHeaders)
        {
            StringBuilder sb = new StringBuilder();

            if (printHeaders)
            {
                //write the headers.
                for (int colCount = 0;
                     colCount < table.Columns.Count; colCount++)
                {
                    sb.Append(table.Columns[colCount].ColumnName);
                    if (colCount != table.Columns.Count - 1)
                    {
                        sb.Append(",");
                    }
                    else
                    {
                        sb.AppendLine();
                    }
                }
            }

            // Write all the rows.
            for (int rowCount = 0;
                 rowCount < table.Rows.Count; rowCount++)
            {
                for (int colCount = 0;
                     colCount < table.Columns.Count; colCount++)
                {
                    sb.Append(table.Rows[rowCount][colCount]);
                    if (colCount != table.Columns.Count - 1)
                    {
                        sb.Append(",");
                    }
                }
                if (rowCount != table.Rows.Count - 1)
                {
                    sb.AppendLine();
                }
            }

            return sb.ToString();
        }

This concludes the recreation of the search portion of the User Manager into the updated version of Speak.  If anyone has any questions, feel free to leave a comment below in the comment section.