UI View Types

There are different types of views, popovers, windows, and notifications in Commerce Cloud Endless Aisle.

Notify/Growl

Notify messages are used to notify the user of changes that occur in the app. These growls disappear on their own, unless specified otherwise. If specified not to automatically close, the user has to tap in the notification/growl to dismiss it.

Notify messages are used to notify user of changes that happen. These growls will disappear on their own, unless specified otherwise. If specified not to auto close then the user has to tap in the notification/growl for it to go away.

Notify usage includes:

Example:

notify(_L('Network is unavailable.'), {
    preventAutoClose : true
});
notify(_L('Network Now Available.'));
Alloy.Dialog.showNotifyGrowl is what is used by the notify function. See lib/dialogUtils.js for implementation details.

Dialogs

Dialogs obtain additional information from the user and are a view on top of the main view. There are three basic types:

Alert dialog

A dialog that comes up warning the user of something and only has one button.

Example

Alloy.Dialog.showAlertDialog({
    messageString : e.description,
    titleString : _L('Unable to obtain payment information.')
});

Search for Alloy.Dialog.showAlertDialog for other examples. See lib/dialogUtils.js for implementation details.

Do not use Ti.UI.createAlertDialog() for customer facing dialogs because it doesn't follow the look and feel of the app. This is used for simulate visa/gift card prompts, but this isn't shown to the associates and only for testing

Confirmation dialog A dialog that comes up that has more than one button and is a message with two choices.

Search for Alloy.Dialog.showConfirmationDialog for examples. See lib/dialogUtils.js for implementation details.

Example:

Alloy.Dialog.showConfirmationDialog({
    messageString : _L('A price override has been applied to this item. Saving the item will remove the override.'),
    okButtonString : _L('Confirm'),
    okFunction : function() {
        // now remove the override
        currentBasket.setProductPriceOverride(override).done(function() {
            // override removed, so continue with whatever is next
            deferred.resolve();
        }).fail(function() {
            // override not removed, so nothing should happen next
            deferred.reject();
        });
    },
    cancelFunction : function() {
        deferred.reject();
    }
});
Advanced custom dialog A custom dialog that prompts for additional information and has two buttons.
  • Create an Alloy view controller for the popover
  • Implement init and deinit exports functions
    • See Memory Management for deinit cleanup
    • If you add any UI components to the view without using the view xml file, call removeAllChildren($.view_you_added_to)
  • Listeners should be added with event handler functions so the listeners can be removed
  • Use $.trigger to fire the events to dismiss the dialog
    • continueEvent and cancelEvent used in showCustomDialog are any events that need to remove and clean up the dialog. Other events should be listened to in another way. See the second example.
    • continueFunction is called when continueEvent is triggered. This function is also called when hideAuxillaryViews is triggered, so the event data might not be there. Be careful to check for this. The app needed to call continueFunction so that notify/growl dialog could get cleared when closed on logout.
    • cancelFunction is called when cancelEvent is triggered
  • Use Alloy.Dialog.showCustomDialog to present the dialog and handle the cleanup after the dismiss event is fired (continueEvent). See lib/dialogUtils.js for all the latest options.
    • Search for Alloy.Dialog.showCustomDialog for examples. See lib/dialogUtils.js for implementation details.
    • Example 1
      // bring up missing phone number dialog (note this uses options for the controller arguments)
      Alloy.Dialog.showCustomDialog({
          controllerPath : 'checkout/shippingAddress/addressWithoutPhonePopover',
          options : {
              countryCode : selectedAddress.getCountryCode()
          },
          cancelEvent : 'addressWithoutPhoneNumber:dismiss',
          continueEvent : 'addressWithoutPhoneNumber:confirm',
          continueFunction : function(event) {
              if(event) { // event might not be sent b/c dialog could have been closed by hideAuxillaryViews on session timeout
                  shipAddress.phone = event.phoneNumber;
                  $.trigger('addressEntered', {
                      address : shipAddress,
                      email : currentCustomer.getEmail()
                  });
              }
          }
      });
      
    • Example 2
      // bring up payment signature (note this uses initOptions to pass options to the init method of the controller and also has a listener on the dialog for an event that happens that does not cause the dialog to close)
      var paymentSignature = Alloy.Dialog.showCustomDialog({
          controllerPath : 'checkout/payments/paymentSignature',
          initOptions : args,
          continueEvent : 'signature:dismiss',
          continueFunction : function() {
              // if shopping anonymously, need to ask to create an account
              if (!customerIsLoggedIn && !isKioskMode()) {
                  createAccount(args);
              }
          }
      });
      // other events that don't affect the removal of the dialog
      paymentSignature.once('signature:accepted', function(){
          currentBasket.setCheckoutStatus('confirmation');
      });
  • Whether to use a backdrop click listener:
    • If the view is a modal dialog, you shouldn't have a backdrop click
    • If the view is a popup for optional changes, a backdrop click should be allowed to remove the popup

Related Links

Endless Aisle Naming Conventions

Alloy Framework

Global Variables

Lifecycle for Views

Memory Management

Listener Types

Promises

Logging

App Configurations

Themes

Localization

Indentation