Wednesday, December 2, 2015

How to display, Form Dialogs in Aikau?

In this blog post, I will quickly show, how we can display the Form controls in a dialog to create a new entity or record.


The below 3 files are required for this.
* studentForm.get.js
* studentForm.get.html.ftl
* studentForm.get.desc.xml


The below are the contents of studentForm.get.js file.
/* studentForm.get.js */

var formControls = [
  {
    name: "alfresco/forms/controls/TextBox",
    config: {
      name: "name1",
      label:"Name",
      placeHolder:"Enter Name Here",
      visibilityConfig: {
        initialValue: true
      }
    }
  },
  {
    name: "alfresco/forms/controls/TextBox",
    config: {
      label:"Age",
      name: "age",
      placeHolder:"Enter Age Here",
      visibilityConfig: {
        initialValue: true
      }
    }
  }
];

Label attribute is used to display the label control just before the actual textbox controls and placeholder attribute is used to display the placeholder value in Name or Age textbox.


var showDialog = {
  name: "alfresco/buttons/AlfButton",
  config: {
    readOnly:"true",
    label: "Create New Student",
    additionalCssClasses: "call-to-action",
    publishTopic: "ALF_CREATE_FORM_DIALOG_REQUEST",
    publishPayloadType: "PROCESS",
    publishPayload: {
      dialogTitle: "Student Form",
      dialogConfirmationButtonTitle: "Register",
      dialogCancellationButtonTitle: "Cancel",
      formSubmissionTopic: "ALF_CRUD_CREATE",
      formSubmissionPayloadMixin: {
        url: "api/type/cm%3Astudent/formprocessor"
      },
      fixedWidth: true,
      widgets: formControls
    }
  }
};
        
model.jsonModel = {
widgets :[showDialog,
            { name: "js/example/personal/HelloWorld"}
         ],
services : [
            "alfresco/dialogs/AlfDialogService",
            "alfresco/services/CrudService" 
        ]     
};


This "ALF_CREATE_FORM_DIALOG_REQUEST" service is responsible for getting the dialog and displaying during the button click.

The "ALF_CRUD_CREATE" service is responsible for creating the records against the specified type in the "formSubmissionPayloadMixin" attribute.

Once you clicked the Create New Student button, you can see the new Form Dialog appears with Name and Age fields.

















/* studentForm.get.html.ftl */
   <@processJsonModel group="share"/>



/* studentForm.get.desc.xml */
<webscript>
  <shortname>Hello World</shortname>
  <family>Aikau Share</family>
  <url>/helloworld</url>
</webscript>











No comments:

Post a Comment