AJAX demo

•

Environment: onsite

Some tooltip text!

• 6 minutes to read

 • 6 minutes to read

In this tutorial, we will add functionality for creating a follow-up appointment for a sale. Here is the code from the class we will register as an AjaxMethod called CreateFollowUp that creates a follow-up based on a sale.

public class AjaxDemo
{
  public string CreateFollowUp()
  {
    SaleEntity sale = AgentFactory.GetSaleAgent().GetSaleEntity(SuperStateManager.GetCurrentId("sale"));
    if (sale != null)
    {
      AppointmentAgent agent = new AppointmentAgent();
      AppointmentEntity app = agent.CreateDefaultAppointmentEntityByType(SuperOffice.Data.TaskType.Appointment);
      app.Contact = sale.Contact;
      app.Person = sale.Person;
      app.Associate = sale.Associate;
      app.Description = "Sample Follow-up from Sale "+ sale.SaleId;
      app.StartDate = DateTime.Today.AddDays(7);
      app.EndDate = app.StartDate;
      app = agent.SaveAppointmentEntity(app);
      return app.AppointmentId.ToString();
    }
    else
      return String.Empty;
  }
}

After you have registered the class in SuperOffice, you will have access to all its web classes, such as SuperStateManager. So, as you can see from the code, we use the SuperStateManager to get the current sale ID. If there is a current sale, the method will create a new appointment for the contact, person, and associate from the sale, with a start date one week from today.

The new appointment is saved using the NetServer Appointment service agent.

The ID of the new appointment is finally returned from the method in a string.

Register AjaxMethod

Like with all objects and control you want to add to SuperOffice, you will have to register classes that are to be used by the AjaxMethodDispatcher in the SoObjectMapping.config file.

The object type is AjaxMethod and the MappingName, AssemblyName, and ObjectName properties refer to the name you want to reference the object in SuperOffice, the name of the assembly (DLL), and the fully qualified name of the class, respectively.

You also need to set the xusing_ajaxnet property to true.

<object type="AjaxMethod"
        mappingname="AjaxDemo"
        assemblyname="CustomizingSIXwebPart6"
        objectname="CustomizingSIXwebPart6.AjaxDemo"
        xusing_ajaxnet="true"></object>

Alternatively, you can use implicit object mapping by decorating the Ajax class with the SoWebObject attribute and inheriting the IWebObject interface. Read more about implicit object mapping

Using AJAX method

When the configuration is done and the class is ready, use the AjaxMethodDispatcher from anywhere in the application to invoke the method.

Note

Make sure the CacheConfigurations key in the ClientConfigurationProvider section of web.config is set to false for any configuration file changes to take effect immediately. If you do not have that set to true, you must restart IIS (do an iisreset) for your changes to take effect and be observed.

Since we wanted to create a follow-up appointment for a sale, we'll add a new button to the Sale page that calls our new server-side method from JavaScript.

Here is the declaration of the button in SoSalePage.config:

<control id="DevNetDemoButton" type="SoButton">
  <caption>Create Follow-Up</caption>
  <config>
    <onclick>Javascript:var appId = AjaxMethodDispatcher.CallSync('CustomizingSIXwebPart6.AjaxDemo.CreateFollowUp'); if (appId > 0) { Dialog.open('appointment''appointment[dialog=stop]?appointment_id='+ appId,''); } else { Dialog.Information('Error', 'Failed to create new appointment', 'error'); }</onclick>
    <width>100</width>
  </config>
</control>

The button is of type SoButton, the caption can be set to whatever you want, and you can set a whole range of properties in the config section. We are only using the onclick and width properties in this example.

Here you can see the new button added to the Sale page;

The JavaScript inside the onclick property is what performs the magic here; it uses the CallSync JavaScript function of the AjaxMethodDispatcher object to call the CreateFollowUp method of our server-side class.

Note

You need to supply the fully-qualified name. You cannot use the MappingName as supplied in SoObjectMapping directly.

The JavaScript stores the value returned from the CallSync method in a local variable. Depending on that value, either the appointment dialog will be opened with the new appointment, or if the method fails for some reason, an error message will be displayed in a SuperOffice message box.

Here are both results as displayed by the Display JavaScript object;

And finally, here's the appointment shown in the activity archive of the contact card;

Conclusion

In this tutorial, we have gone through how you can call your own server-side classes from JavaScript using the AjaxMethodDispatcher JavaScript object.

The use of the display JavaScript object was there mainly to show you more of the JavaScript objects that are available to you in SuperOffice.

Take a look inside the Scripts folder of your installation, it's a huge library there ready for you to use and also extend to your own purpose!

If you take a look at for example Scripts/Dialog.js, you will find there are a whole set of ways to display message boxes with various sets of buttons and so on.