Ask a Question

Still coding with AngularJS and Nuxeo, today I will show you another AngularJS sample I made using the REST API. The goal here was to let Nuxeo users ask and answer questions, a bit like we do on answers.nuxeo.com.

It's a simple application which makes it a good use case for CRUD operations. It was really quick and easy to do even though I am far from an expert in AngularJS and JavaScript (but I could really feel it becoming easier). Most of the new stuff I learned came from egghead.io - you should start there if you don't know AngularJS.

Here are a number of screenshots. Lise helped me a lot on this to make it look good, using Semantic UI/.

Question List

Let's focus on the question asking. Here's the template used for the form:

<div class="active side ui segment">
<form name="myForm" class="ui form control-group">

<div class="field" ng-class="{error: myForm.name.$invalid}">
<h2>Ask a question</h2>
<label>Title</label>
<input type="text" name="title" placeholder="A question as clear and concise as possible" ng-model="doc.properties['dc:title']" required>
<span ng-show="myForm.name.$error.required" class="help-inline">
Required</span>
</div>
<div class="field" ng-class="{error: myForm.site.$invalid}">
<label>Description</label>
<textarea name="description" ng-model="doc.properties['dc:description']" placeholder=" A factual description so that everyone understands the question and issue and can respond correctly" required></textarea>
<span ng-show="myForm.site.$error.required" class="help-inline">
Required</span>
</div>
<div class="field">
<label>Communities</label>
<select multiple id="communities" class="ui input medium" ng-model="doc.properties['qs:community']">
<option ng-repeat="community in communities">{{community.title}}</option>
</select>
</div>
<div class="field">
<button ng-click="save()" ng-disabled="isClean() || myForm.$invalid"
class="ui blue submit button">Ask</button>
<a href="#/questions" class="btn">Cancel</a>
</div>
</form>
</div>

As you can see it's simple, and using semantic UI makes it even easier to understand. The communities are actually the social workspaces available on my Nuxeo instance. You can see how they are fetched by looking at the controller:

.controller("AskCtrl", ['$scope', 'nxSession', '$location', 'nxSearch'
($scope, nxSession, $location, nxSearch) ->
$scope.doc = { type:"question", properties: {}}
communitiesSearch = new nxSearch()
.setQuery("SELECT * FROM SocialWorkspace WHERE ecm:currentLifeCycleState <> 'deleted'")
.setPageSize(200)
$scope.communities = communitiesSearch.items
communitiesSearch.nextPage()

$scope.save = () ->
nxSession.createDocument("/collaboration/questions", $scope.doc).then (question) ->
$location.path("/question/" + question.uid + '/view')

])

The first part of the controller creates an empty doc document of type question, without any properties. Then the nxSearch service is used to fetch the list of communities. That's all we need to display the 'Ask a Question' form. If the user clicks on the Ask button, we execute the $scope.save() method. It uses the nxSession service's createDocument method. The first argument is the path of the parent document, the second argument is our doc object updated with the fields of our form.

Session.createDocument = (parentPath, doc)->
doc['entity-type'] = "document"
$http.post(apiRootPath + "/path" + parentPath , doc).then (response)->
new nxDocument(response.data.uid, response.data)

As you can see, the createDocument is dead simple too. It's an HTTP post of a JSON object. If you want to see all the other endpoints available for the REST API, I invite you to visit http://demo.nuxeo.com/nuxeo/api/v1/doc/ and try the API directly!

Single Question