Tag Archives: Angular

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

Form Library JS – an InfoPath replacement?

Microsoft announced InfoPath will go away in 2023.  It makes sense and they have good reasons.   However, form developers are confused about available options.  I have an idea for the InfoPath Roadmap and would appreciate your feedback in the comments below or Twitter (@spjeff) please.

Why not use JavaScript to create similar XML documents?


When people say “InfoPath” they generally are referring to a three part system outlined below.   InfoPath strictly speaking is the form input experience.  Form Library holds the saved XML output.  SharePoint Designer can then trigger email notifications based on status change.

image

 

InfoPath as a form input experience has many limitations based on the server postback and Dot Net architecture.  Just try a large repeating table and watch the slow “Loading…” experience as users click and rules postback to the SharePoint IFS backend.   HTML5 and JavaScript offer new options for client side validation, async loading, mobile touch input, responsive layout, and advanced rendering with framworks like JQueryUI  / Bootstrap / Angular.   That’s awesome form input technology!    However, InfoPath is normally chosen for ease of use and “no code”.   Let’s think about how that conversation might go …


Developer Conversation

DEV1 >  “Hey did you hear Microsoft is retiring InfoPath in 2023?”

DEV2 >  “Yeah, but it’s all we have today so I’ll keep using it.  Not sure what else to use.  Sure would be nice to have HTML5 and cooler input experience.”

DEV1 > “Definitely.  Coding from scratch is a lot of work.  I don’t really want to mess around with SPList REST connections for CRUD or make a SQL database with SVC/OData for simple forms.  My head hurts.”

DEV2>  “True, but I guess we’ll gave to make a schema first then form later.”

DEV1 > “InfoPath saved as XML.   I like XML.  It works well for import/export across all of our systems.   Could we keep XML but ditch InfoPath?”

DEV2 > “Cool idea, but I’m not sure how.”


Why throw out the baby with the bathwater?   

 

Can’t we make fantastic forms with HTML5/JS and then save back to a Form Library in order to leverage SharePoint for storage, views, and workflow?    Right now this is just an idea.  I don’t yet have a working prototype to show but think it would be straightforward to convert JSON to XML and upload.     InfoPath would still be used but by developers for schema only (define XML structure).   End users would never see it.

 

Please leave a comment below and let me know if you think this might be practical.  Thanks!   Smile

 

FormLibraryJS

 


References

My first Angular app – Todo List

Recently I began studying Angular as a JavaScript framework to accelerate front end development.  SharePoint 2013 app model is obviously a place where this could be helpful.

Below is a quick 10 minute video of me coding a Todo List with Angular and Visual Studio 2013 based on the JS Fiddle example http://jsfiddle.net/dakra/U3pVM/.    Hopefully this walkthrough shows just how quick and simple Angular can be.  Intellisence from Visual Studio and Viasfora “rainbow brackets” make the coding even easier.   Enjoy!  Smile

 

 

 

For a good read on Angular concepts check out O’Reilly at http://shop.oreilly.com/product/0636920028055.do

Return to Top ▲Return to Top ▲