Sharepoint Hosted App with Custom List Forms

Question

I'm developing a SharePoint Hosted App that deploys a custom list. I am trying to figure out what the best way to create custom New, Display and Edit Forms for that list are.

Is there a way to create custom forms for New, Edit and Display in the same way as you do with a normal list via SPD.

or

Am I better served creating separate pages for each and use REST, jQuery etc to add, edit and display from the list.

Advice would be much appreciated

Answer 1

I'm researching same subject. If you are developing App than you should not consider code behind or using Designer. So it seams it is better to create pages that do CRUD on list.

Here you can find some samples http://apps.codeplex.com/releases/view/91377

Answer 2

I would suggest you custom develop forms in HTML and implement crud operations using rest api for your forms.

You can use Angular JS for running all your forms. Have a service for CRUDing into sharepoint lists and libraries, and different views for list forms that consume services.

If you implement through angular JS, then, you have only to write service once, and then in future, if you need to add further lists and forms, then you can achieve that by adding new views and comsuming the same service.

Example of a typical service function -

var _rest = function(rquest) {


      var req = {
        method: rquest.method,
        url: rquest.url,
        contentType: 'application/json;odata=verbose',
        headers: rquest.header,
        data: JSON.stringify(rquest.body),
        success: rquest.success,
        error: rquest.failure,

      };

      var executor = new SP.RequestExecutor("http://mysite.sharepoint.com");
      executor.executeAsync(req);

      return rquest.deferred.promise;
    }

Above is a generic function for firing rest requests.

 var _get = function($scope) {

      var req = {};

      req.deferred = $q.defer();
      req.method = 'GET';
      req.url = url + "/_api/web/lists/getByTitle('" + $scope.serviceParams.getRqst.lName
                + "')/items" + $scope.serviceParams.getRqst.filter;
      req.header = {
        "Accept": "application/json; odata=verbose"
      };
      req.body = "";
      req.success = function(data) {
        req.deferred.resolve(JSON.parse(data.body));
      };
      req.failure = function(data) {
        req.deferred.reject(data);
      };

      _rest(req);

      return req.deferred.promise;
    }

The above is a generic function to get items for any list.

This is a nice AngularJS and SharePoint Example that you can refer to for getting a hang of implementing AngularJS with SharePoint.

Answer 3

I Googled "sharepoint hosted app custom list forms" and I got several links that should answer your question. Here are a couple:

SharePoint List NewForm Customization in SharePoint Hosted App

Add Custom New/ Edit/ Display Form To List Using SharePoint Hosted App