Navigation

Navigation refers at how users will be able to find the different views in your app.

Slingr allows two main ways of navigation:

• Main menu: this menu is located at the left of the app. Depending on the size of the device it might be hidden or not. You can add menu items at the root of left menu or you can use menu groups to add one level of nesting.
• Secondary menu: this menu is located on the top-right area of the app. Here you will be able to add menu items (it doesn’t support menu groups) that will be placed left to the User menu.
• User menu: this menu is located on the top-right corner of the app. It is the menu used by other system actions like My profile or Logout. Here you will be able to add menu items (it doesn’t support menu groups) that will be placed above the Logout action.

Then some components will provide some additional features to navigate through the app (like relationship fields that allow to jump to other records), but those are explained on each component.

Menu item

Menu items point to a view in the app. When they are clicked the view will be rendered in the main content area.

Menu items have the following settings:

• View: this is the view the menu item points to.
• Label: the label to show in the menu. By default it will be the same as the label of the view.
• Icon: this is the icon. You can leave this empty if you don’t want any icon.
• Expression: Allows to add filtering expressions that will be added to the selected view. This is useful to avoid to create different collection views for the same entity when the difference between each view is just an expression that filter the data. Please check the documentation for Expressions to know how to configure the filter.

In the case of record views you will be asked to enter a script to select the record to show in the view:

Returns

string - The ID of the record that should be displayed in the record view.

Samples

// finds one record based on current user

var settings;
if (sys.context.getCurrentUser().isPrimaryGroup('Testing')) {
  settings = sys.data.findOne('settings', {type: 'test'});
} else {
  settings = sys.data.findOne('settings', {type: 'prod'});
}
return settings.id();

Dynamic menu item

Dynamic menu items contain a script that returns a list of menu entries. Each entry will be added to the menu in the position of the dynamic menu entry.

Dynamic menu items have the following settings:

• Label: the label to identify this menu item.

• Script: this script has to return an array of menu items. It can use the app data to determine which entries will be available and how they are defined, which means which views they point to, label, icon, or additional options like filters.

  Returns

  object[] - An array of menu items. Each item should have the following things:

  • label: this is the label to show in the menu.
  • icon: this is the name of the icon (you can check icon names here).
  • view: this is the ID or the name of the view to load when the menu entry is selected.
  • filters: if the view allows filters, here is where you can define them. See the docs for filters for more information.

  Samples

  // returns a list of menu items that point to Companies view
    
  var menuEntries = [];
    
  //this entry shows only active companies
  menuEntries.push({
    label: 'Active Companies',
    icon: 'account-circle',
    view: 'companies',
    filters: {
      active: 'true'
    }
  });
    
  // this entry shows only inactive companies
  menuEntries.push({
    label: 'Inactive Companies',
    icon: 'flower',
    view: 'companies',
    filters: {
      active: 'false'
    }
  });
    
  // this entry shows all the companies (no filter applyed)
  menuEntries.push({
    label: 'All the Companies',
    icon: 'case',
    view: 'companies'
  });
    
  return menuEntries;
    
  

  // return a list of menu items. Each menu entry points to contacts grid view and the contacts are filtered by company
    
  var companies = sys.data.find('companies', {});
  var entries = [];
  while (companies.hasNext()) {
    var company = companies.next();
    entries.push({
      label: company.label(),
      view: 'contacts',
      icon: 'case-check',
      filters: {
        company: company.label()
      }
    });
  }
    
  return entries;
    
  

  // return one menu item for Contacts view that shows only contacts with a value on ipAddress field
    
  return [{
      label: 'Contacts with IP Address',
      view: 'contacts',
      filters: {
        ipAddress: 'notEmpty()'
      }
  }];
    
  

  // return one menu item for Contacts view that shows only contacts for company test A and company ABC
    
  var menuEntries = [];
    
  menuEntries.push({
    label: "Contacts for test A and ABC",
    icon: "account-circle",
    view: "contacts",
    filters: {
        company: ["test A", "ABC"]
     }
  });
    
  return menuEntries;
    
  

  // return one menu item for for Companies view that shows the related company for current logged user
    
  var menuEntries = [];
    
  menuEntries.push({
    label: 'User company',
    icon: 'account-circle',
    view: 'companies',
    filters: {name: 'currentUserField(company.name)'}
  });
    
  return menuEntries;
    
  

Menu group

Menu groups can hold menu items. This way you can group items that are related under one label in the menu.

Menu groups have the following settings:

• Label: the label to show in the menu.
• Icon: this is the icon. You can leave this empty if you don’t want any icon.

This only works for the main menu.