ServiceWise Developers’ Blog – Angular Directive with Salesforce Field Sets

In this article we will demonstrate a simple yet effective solution that combines a dynamic field set and Angular directive. This solution can be used to easily present automatically any SObject, view and edit it.

The use case we’ll present this time is of a client who wanted a dynamic Visual Force page where they can choose the fields that will be shown on the screen, as well as have the ability to edit and save the SObject.

This solution requires an import of Angular 1.3.0 and jquery libraries.

  1. We created a field set under the SObject and chose all the relevant fields.
    1. In the apex controller we created a wrapper class named “FieldsMapping” that will represent each field in the field set:
  2. In the controller, we created a List named <FieldsMapping>, and for each field in the field set we created an instance of this FieldsMapping wrapper. So, now we have the List<FieldsMapping> fields in the controller.

Now we will demonstrate the steps on the client’s side:

  1. We created a directive in angular, named “‘dynamichtml'”:
  2. In the code above, for each type, we created a dynamic template, that was linked by the < dynamichtml > html tag.
  3. From the apex controller we get an instance of the FieldsMapping wrapper class. We check its type in the switch statement, according to the field type we created in the template for the ng-directive.
  4. In the html code itself, we added an ng-repeat loop that iterates the FieldsMapping list and adds the directive for each field in the list.

In order to add an edit mode, we created a function that checks the field type and updates the SObject:

After implementing the code, this is what the end user saw:

We hope this post taught you something new, and showed you how creative and innovative you can get with code. See you next time on our blog, with another unprecedented solution from the ServiceWise R&D team!

Let us know in the comments if there’s a specific subject you’d like us to write about, and if you found this post helpful.

If you’d like to hear more about our solutions and services, don’t hesitate to contact us.