ddraper

Aikau Mini Examples - CRUD Service (delete)

Blog Post created by ddraper on Sep 29, 2014

Introduction



This is one post in a series of short examples of things that can be done using the Aikau framework. The series is not intended to provide complete documentation but simply to show how to solve frequently encountered problems, implement repeating UI patterns, show case how to use existing widgets or how to create new ones.

Real World Use Case



Sometimes you want to be able to delete things. And sometimes you want to be able to delete things directly from where you see them listed.

Example



This post picks up where the last one left off. I'm going to assume that you've already worked your way through the post or have at least downloaded the example JAR and taken a look at the code.



We've already built a basic list of our Data Lists and now we want to provide an action icon that when clicked will allow us to delete a Data List. This is achieved by using the 'alfresco/renderers/PublishAction' widget. We're going to update the JSON model that was defined in the previous blog post to add a new cell to each row of data in our view:

var deleteCell = {

  name: 'alfresco/documentlibrary/views/layouts/Cell',

  config: {

    widgets: [

      {

        name: 'alfresco/renderers/PublishAction',

        config: {

          iconClass: 'delete-16',

          propertyToRender: 'title',

          altText: 'Delete {0}',

          publishTopic: 'ALF_CRUD_DELETE',

          publishPayloadType: 'PROCESS',

          publishPayload: {

            requiresConfirmation: true,

            url: 'slingshot/datalists/list/node/{nodeRef}',

            confirmationTitle: 'Delete Data List',

            confirmationPrompt: 'Are you sure you want to delete '{title}'?',

            successMessage: 'Successfully deleted '{title}''

          },

          publishPayloadModifiers: ['processCurrentItemTokens', 'convertNodeRefToUrl']

        }

      }

    ]

  }

};

var viewRow = widgetUtils.findObject(model.jsonModel.widgets, 'id', 'VIEW_ROW');

viewRow.config.widgets.push(deleteCell);


There's quite a lot of configuration in this example, so let's break it down into small chunks.

Configuring the DELETE Payload



Firstly we want to define the action itself. We're going to publish on the 'ALF_CRUD_DELETE' topic to which the 'alfresco/services/CrudService' subscribes and we want to identify the specific item that we want to delete.



When defining a publication payload you can optionally select a number of different payload types and here we are setting the 'publishPayloadType' attribute to be 'PROCESS' to indicate that we want to perform some processing on the payload.



A number of processors have been initially included in Aikau and we specify two of them in the 'publishPayloadModifiers' array:



  • 'processCurrentItemTokens' looks for all string data wrapped in curly braces (e.g. the {nodeRef} in 'slingshot/datalists/list/node/{nodeRef}') and converts it to the matching entry in the 'currentItem'.


  • 'convertNodeRefToUrl' replaces any occurence of '://' with '/' to make NodeRef data URL friendly.


Confirmation Prompting



The CrudService recognizes that DELETE actions may require a confirmation so we include a 'requiresConfirmation' attribute in the payload as well as the messages to use in the confirmation dialog title, confirmation dialog body and the subsequent success message (note that we're able to include 'currentItem' tokens in the message strings because the 'currentItem' is always included in the publication to the service).

Icon and Accessibility



The last part of the configuration to describe is that we specify the icon using the 'iconClass' attribute and the 'altText' for the icon. The 'propertyToRender' attribute is available for use as a message token in the alt text so we can provide meaningful text on the action.

Example In Action



This is defined in a JavaScript controller for a WebScript mapped to the /crudServiceDelete URL. When deployed to a Share (or any Surf based Aikau application) this can be accessed by the URL: http://localhost:8081/share/page/dp/ws/crudServiceDelete



This screenshots shows the page in action:



DataListDelete



DataListDeletePromptYou can download the complete example here.



 



Outcomes