Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.
Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.

Video

BreezeJS – Edit SQL table with < 100 lines of JS code [VIDEO]

With SharePoint 2013 and industry movement towards the cloud I’ve been exploring JavaScript as a primary way to develop rich applications.

One common challenge is data access.  

With C# I have years of experience with [System.Data] and can perform CRUD against SQL relational databases in my sleep.  Open connection, query, data adapter, fill DataTable, and voila!    Muscle memory. Second nature.  Tried and true methods.   However, in the new client side JS world I had no clue where to begin.

Enter Breeze.

 

People describe Breeze as “Entity Framework on the client in JavaScript” which sounds simple yet has profound implication for the developer.   CRUD operations, LINQ style query, navigating primary/foreign keys, input validation, caching, batch updates, and more.   That’s a lot to consider and new ideas take time to absorb.   Breeze could potentially replace:

  • ASP.Net (ASPX) web forms
  • ASCX user controls
  • InfoPath forms
  • SharePoint web parts
  • WCF 5.6 data services
  • OData
  • Classic WebAPI

 

I set out to code an example with a few goals:

  • Create simple SQL schema (two tables – parent/child – one to many)
  • Execute CRUD operations in JS against SQL  tables
  • Leverage JS plugins and NuGet “Install-Package” to load third party components
    • Install-Package breeze.webapi2.ef6
    • Install-Package breeze.angular
    • Install-Package angularjs.core
  • Little code as possible

The whole thing took less than 30 minutes and I edited video down to just 15.    I was impressed by how straightforward and easy the process was.   Breeze# in ASP.Net MVC for the back end WebAPI controller was nearly identical to the Breeze example code.   Add one C# method per entity (SQL table) and Breeze does the rest.  The JS front end took a little more time to understand but was also easy to apply.   Connect  Entity Manager to the Breeze URL and you’re ready for CRUD queries.    Amazing!     Given how easy Breeze is I would be hard pressed to use OData or manually created WebAPI controllers with C# code to query a database.   If you can use Breeze, then use it!    You’ll save lots of effort.

Please leave a comment if you found this helpful.   Thank you! 

shades_smile

 

Watch Video

[BreezeJS and WebAPI – Edit SQL table in JS with less than 100 lines of code]

 

Download Code

Download

http://spjeff.com/etc/Appraisal-Breeze-VS2013.zip

 

Screenshots

image
image

 

image

 

References

 

WebAPI OData – 10 min video introduction (Visual Studio 2013)

I’ve been learning about OData and wanted to record a quick getting started video with how to create a new WebAPI project, add OData Controller, and send HTTP CRUD operations.  Below is an example using Adventure Works Departments with sample code, screenshots, and a 10 minute video introduction.   Please leave a comment if you found this helpful.  Thanks! 

shades_smile

Video Content

  • Create MVC 4 web application
  • SQL Express – Adventure Works Departments
  • Add “AdventureWorks.edmx
    • Wizard driven
    • F4 set namespace
  • Add “DepartmentsController.cs
    • Create from EDMX class
    • Implements ODataController
    • Replace ID with KEY
  • Edit “WebApiConfig.cs
    • Comment out default route
    • Add OData route builder
  • Test with HTTP manually
  • Test with Chrome REST Postman
  • SQL Express – see changed data

Watch Video

WebAPI OData – 10 min video introduction (Visual Studio 2013) from Jeff Jones on Vimeo.

Sample Code

[WebApiConfig.cs]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
using System.Web.Http.OData.Builder;
namespace MvcApplication1
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            //config.Routes.MapHttpRoute(
            //    name: "DefaultApi",
            //    routeTemplate: "api/{controller}/{id}",
            //    defaults: new { id = RouteParameter.Optional }
            //);
            ODataConventionModelBuilder build = new ODataConventionModelBuilder();
            build.EntitySet("Departments");
            config.Routes.MapODataRoute("odata", "odata", build.GetEdmModel());
            config.EnableQuerySupport(new QueryableAttribute()); 
            // Uncomment the following line of code to enable query support for actions with an IQueryable or IQueryable return type.
            // To avoid processing unexpected or malicious queries, use the validation settings on QueryableAttribute to validate incoming queries.
            // For more information, visit http://go.microsoft.com/fwlink/?LinkId=279712.
            //config.EnableQuerySupport();
            // To disable tracing in your application, please comment out or remove the following line of code
            // For more information, refer to: http://www.asp.net/web-api
            config.EnableSystemDiagnosticsTracing();
        }
    }
}

 

[DepartmentsController.cs]

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;
using System.Web.Http.OData;
namespace MvcApplication1.Controllers
{
    public class DepartmentsController : ODataController
    {
        private AdventureWorks2012Entities db = new AdventureWorks2012Entities();
        // GET api/Default1
        public IEnumerable GetDepartments()
        {
            return db.Departments.AsEnumerable();
        }
        // GET api/Default1/5
        public Department GetDepartment(short key)
        {
            Department department = db.Departments.Find(key);
            if (department == null)
            {
                throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));
            }
            return department;
        }
        // PUT api/Default1/5
        public HttpResponseMessage PutDepartment(short key, Department department)
        {
            if (!ModelState.IsValid)
            {
                return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
            }
            if (key != department.DepartmentID)
            {
                return Request.CreateResponse(HttpStatusCode.BadRequest);
            }
            db.Entry(department).State = EntityState.Modified;
            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
            }
            return Request.CreateResponse(HttpStatusCode.OK);
        }
        // POST api/Default1
        public HttpResponseMessage PostDepartment(Department department)
        {
            if (ModelState.IsValid)
            {
                db.Departments.Add(department);
                db.SaveChanges();
                HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, department);
                response.Headers.Location = new Uri(Url.Link("odata", new { key = department.DepartmentID }));
                return response;
            }
            else
            {
                return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
            }
        }
        // DELETE api/Default1/5
        public HttpResponseMessage DeleteDepartment(short key)
        {
            Department department = db.Departments.Find(key);
            if (department == null)
            {
                return Request.CreateResponse(HttpStatusCode.NotFound);
            }
            db.Departments.Remove(department);
            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
            }
            return Request.CreateResponse(HttpStatusCode.OK, department);
        }
        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }
    }
}

Downloads

Screenshots

image
image
image
image
image

VIDEO – Tour of SSRS, PowerPivot, and PowerView

I wanted to record an introduction to the new reporting and Business Intelligence capability within SharePoint 2013.   After loading SP2013, there are a few steps to activate the backend Service Applications for BI.   The SQL 2012 install media is needed for this to install SSRS Integrated Mode and PowerPivot.

However, once those are online you can load great samples like “PowerView – Hello World Picnic” to browse real data and confirm it all works correctly.   Very cool stuff, enjoy!  

Smile

References

 

SSRS-PowerPivot-PowerView from Jeff Jones on Vimeo.

VIDEO – How to test SSRS 2012 (map of US states)

Check out the below video to learn how to test SQL Server Reporting Services.  After installing to Central Admin with the steps from http://msdn.microsoft.com/en-us/library/jj219068.aspx  I wanted to see a real report to confirm successful install.    A simple SharePoint list with US state postal abbreviations connects to RDL with Map Wizard and is a great way to show the full pipeline works correctly:

  • SSRS Service Instance (on server)
  • SSRS Service Application (on farm)
  • Authentication (C2WTS or Kerberos)
  • Site Feature (PowerView Integration)
  • Site Content Types  (Report Builder Model – SMDL, Report Builder Report – RDL, Report Data Source – RSDS)
  • Report Builder 3.0  (web deploy click once)
  • RDL web rendering engine
  • Export to PDF  web actions menu

If you find this helpful, please leave a comment and I’ll try to do more videos. 

Smile

 

How to test SSRS 2012 on SP 2013   (length 7:12) from Jeff Jones on Vimeo.

© Copyright 2016
@ SPJeff

Return to Top ▲Return to Top ▲