First Day at the SPA

To develop for Liferay is no simple Task. There are many things you have to keep in mind, if you want to create and develop professional Applications, and you also have to learn many different technologies, if you aren't yet an savvy Java-Developer. So what are the alternatives, searching the web and marketplace portlets, or ...? Here is a different approach, that uses vanilla Liferay and HTML / Javascript and very little time.

 

So how can you create applications, and still have time for a day at the SPA?

The short Answer

JSON Webservices and a little bit of HTML and Javascript.
 

The long Answer

To show my take on the long answer, I made up this small example. But bare in mind, that any form with many amount and logic is create able.
 

The example Task: Create a Mailing List sign up (control)

Screenshot Endproduct

 

Step 1: Create our “database”

  1. First we need to create a web-folder, lets call it “Mailing List”.
    Here all the “data entries”, will be stored

     
  2. Next we create our “datastructure” as an Journal / WebContent Structure (the Liferay naming is a bit confusing, to an Liferay beginner like me), adding all field we need.

    For our example the field Email should be enough.

  3. Now create a template for the newly created structure

     

Step 2: Now comes the best part "CODING"

Write some Javascript and HTML Code, that uses the jsons webservices to create new Articles (this is the important part), these entries are our “data entries”. For our example I used angular and created all the liferay specific functions in an separate module, so that I can reuse. (It is not yet production grade code, but nice for a demo)

Here, the HTML / Javascript code that should be added into the WebContent:

 <div class="newletter-box">
  <style type="text/css">.newletter-box .span4.no-margin{margin:0;}</style>
  <div class="span4 no-margin">
   <div id="newsletterAlertBox" class="alert alert-success hide">
    <b>Success!</b> Your email address is now entered in our mailingslist!
   </div>
   <form id="newsletterBox" class="form-search">
    <div class="input-append" data-ng-app="newsApp" data-ng-controller="baseController">
     <input class="search-query" data-ng-model="Email" placeholder="Enter Email ... " type="text" />
     <button class="btn" data-ng-click="saveEmailAddress()" type="button">
      <i class="icon-envelope">&nbsp;</i>Add to List
     </button>
    </div>
   </form>
   <script src="/angular/angular.min.js"></script>
   <script src="/angular-addon/liferay-service-provider.js"></script>
   <script>
    (function(app){
     app.config(["liferayProvider", function (liferayProvider) {
      liferayProvider.setToken(btoa("newsletterservice:newsletterservice"));
      liferayProvider.addTypes({
       name:"Newsletter",
       groupId: 24913,
       folderId: 24927,
       structureId: 24930,
       templateId: 24932
      });
     }]).controller("baseController", ["$scope", "liferay", function($scope, liferay){
      $scope.saveEmailAddress = function(){
       liferay["Newsletter"].create({Email:$scope.Email}).success(function(){
        document.querySelectorAll("#newsletterAlertBox").className = "alert alert-success";
        document.querySelectorAll("#newsletterBox").className += " hide";
       }).error(function(){
        console.warn(arguments);
       })
      };
     }]);
    }(angular.module("newsApp",["LiferayService"])));
   </script>
  </div>
</div>

I posted the code for the angular module, on github: https://github.com/akumagamo/javascript-liferay-angular-service, if you wanted to use it or try it out yourself.

Last Step:

Go to the SPA and enjoy the time you have saved. (Since a form like this can be build in 30 mins, and about 60-90 mins without the liferay-service-provider.js ) No Java, no Jenkins, no Maven, no ....  just Vanilla Liferay and some basic HTML and Javascript.

I'm eager to hear from other people and experiences. Please share any Ideas, Comments and Feedback you might have.

Blogs
Very nice:
A possible improvement would be to be able to write into a dynamic data list instead of a webcontent.
Hello Christoph, Thank you for the Feedback! Its a great Idea, I have it planed for my next post (hopefully out tomorrow). I started with the WebContent, since the for an other mini application I needed the Data to be searchable (and it was the fasted solution). emoticon
Hello Christoph, in my new Post https://web.liferay.com/web/akumagamo/blog/-/blogs/so-now-what- I tried my luck on the dynamic data list. The code just covers the parts I need, create and update, but I was amazed that it was so easy to interact with the DDLRecords as with the WebContent. It is a much better option. Thanks again for the input.