• Layout selector (<umbLayoutSelector />)

• Load indicator (<umbLoadIndicator />)

• Property (<umbProperty />)

The umb-property directive can along with umb-property-editor be used for rendering property editors in the backoffice.

The two directives are typically used together. For instance, if your Angular model has an array of properties, your view could look something like:

<umb-property property="property" ng-repeat="property in properties">
    <umb-property-editor model="property"></umb-property-editor>
</umb-property>

Properties contains the model for each property. ng-repeat can be used to iterate over each property, passing them to the two directives via property and model attributes.

For a basic property with a textbox, the model for the property can be defined as:

var property = {
    alias: "myProperty",
    label: "My property",
    description: "This is my property.",
    value: "Cupcake ipsum dolor sit amet oat cake marzipan...",
    view: "textbox"
};

The view property specifies the URL to the property editor that should be used for this property. To use one of the built-in property editors in Umbraco, you can specify the alias (eg. textbox) rather than the full URL to the view (eg. /umbraco/Views/propertyeditors/textbox/textbox.html).

You can see a list of all the built-in property editors in the propertyeditors folder on GitHub.

When you have a list of items, you can use the umb-layout-selector directive to let users toggle between different layouts. For instance, in Umbraco's media archive, users can select between a grid-based layout (thumbnails) and a list-based layout (table).

The directive has three attributes:

• layouts is used to indicate the available layouts that the user should be able to select.

• active-layout is a reference to the layout currently being used.

• on-layout-select is a callback function triggered when the user chooses another layout.

For a view utilizing this directive:

• The HTML could look something like this:

  Copy

  <div ng-controller="myController">
      <umb-layout-selector layouts="layouts"
                          active-layout="activeLayout"
                          on-layout-select="selectLayout(layout)">
      </umb-layout-selector>
  </div>

• You'd also need a controller for initializing the different values to be used for the directive:

  Copy

  angular.module("umbraco").controller("myController", function ($scope) {
  
      // Declare the available layouts
      $scope.layouts = [
          {
              name: "Grid",
              icon: "icon-thumbnails-small",
              path: "gridpath",
              selected : true
          },
          {
              name: "List",
              icon: "icon-list",
              path: "listpath",
              selected: true
          }
      ];
  
      // Declare the function called by the directive when user chooses another layout
      $scope.selectLayout = function(layout) {
          $scope.activeLayout = layout;
          $scope.layouts.forEach(element => element.active = false);
          layout.active = true;
      };
  
      // Select the first layout
      $scope.selectLayout($scope.layouts[0]);
  
  });

For each layout:

• name property indicates the visual name of the layout (eg. used when hovering over the layout in the selector)

• icon is the CSS selector for the icon of the layout.

• path attribute indicates a sort of alias, and is used internally for comparing the layouts.

• Each layout should also have a selected property indicating whether a particular layout is enabled, and thereby visible in the selector.

Many web sites and web applications use a form of load indicator to indicate a busy state to the user. Throughout the backoffice, Umbraco uses three animated circles as a load indicator - eg. as shown below:

Umbraco internally does this via the <umb-load-indicator /> directive, which you can also use in your own views for the backoffice.

The directive doesn't have any parameters on it's own. Since you most likely only wish to show the load indicator during certain states of your code, you can control this either through ng-if or ng-show.

For instance if your controller sets the loading variable to true during busy states:

The directive uses CSS and absolute position to center it self in. For instance, if you're also using the <umb-box-content /> directive, you can set it's position to relative:

As seen on the animation in the beginning of this page, the load indicator is centered in the white box.