Mobile navigation from component

  • 1
  • Question
  • Updated 5 years ago
Is it possible to slide in a new panel in the mobile builder from a custom component? I can't find any info about this in the dev docs. I'm moving a custom component with a google map from a desktop page. In the desktop page I have a links from map markers to a checkin page with a redirect. However in the mobile version I would prefer to stay within the same page and just switch the active panel. Is that possible?
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb

Posted 5 years ago

  • 1
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb
And i noticed in this thread that redirects don't seem to work in SF1. Is this still the case or has the issue been resolved? Unless there is an easy way to redirect to the panel I might otherwise fall back to separate pages.
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Hi Peter,

We haven't documented these apis yet, but there are a few that will help you work with panels that I can share with you.

skuid.mobile.setLeftPanel('myPanelName');

setLeftPanel will hide any existing left panel and pop out a new one with the given name.

skuid.mobile.hideLeftPanel();

hideLeftPanel will hide any left panel that is currently being shown.

skuid.mobile.toggleLeftPanel('myPanelName');

toggleLeftPanel will hide the panel of the given name if it is currently being shown, or it will show that panel if it is not currently being shown.

skuid.mobile.setMainPanel('myPanelName');

setMainPanel will switch out the main panel with the panel specified.

Is that what you were looking for?  Also, I believe the issue with links in salesforce1 has been resolved.
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb
Thanks Ben, that was what I was looking for. I just did a quick test and cant get it to work fully as I want though. In my code I have an In-Line component in the header. My idea was to use that component to display whether or not the user is checked in and to switch the main panel if that is the case.

var element = arguments[0],
   $ = skuid.$;

var iPAModel = skuid.model.getModel('iPunktArbete');
var iPARow = iPAModel.getFirstRow(); // if empty then not checked in

$( document ).ready(function() {
    if($.isEmptyObject(iPARow)) {
      element.html('Not checked in'); 
} else {
  element.html('Checked in');
  skuid.mobile.setMainPanel('IncheckatArb');
}
});

If I change the setMainPanel to setLeftPanel then it will work and the left panel will only be displayed when the user is checked in. The main panel however stays with the default panel. Any suggestions on how I can solve that?