Backwards Navigation

[MDolan]

I'm having trouble finding the best method for a user to navigate backwards in a mobile application.

My application needs to be very dynamic so most of my components contain an empty "workspace" panel that i use to populate other components. For example: below is an image of the layout for a Customer Search component. When the user selects a row it opens the Customer Details Component within the workspace panel.

Using the Navigation Has "Previous Card" button seems to only work if all the panels are contained in the same navigator. Once the user opens the Customer Details Component the "Previous Card" option does not work. Programing a button with the Panel Action of Navigate and the action property of History Back seems to have the same issues.

Another issue is that the user is able to open the same Customer Details Component from other components and not just the Search Customer Component, so I can't just hard code a back button to open a specific component.

Am I doing something wrong? Is there a recommended best practice for designing mobile apps to resolve this issue?

Capture.PNG

[Davidk]

Re: Backwards Navigation

What you can do is use the <panelObject>.getState and <panelObject>.setState methods.

Have a look a video UX_V12--67 - really excellent.

Using these methods, before you jump anywhere, you save where you are... then you can go right back to where you were.

There's only one change to the code that's recommended. Instead of using the window namespace to save the state of the panel object...

window._state = panelObj.getState();

Use the dialog object namespace instead...

{dialog.Object}._state = panelObj.getState();

It's like keeping things inside the family.

[MDolan]

Re: Backwards Navigation

Thanks for the suggestion David!

Unfortunately I'm still running into the same issue with this method.

Attached is a dummy copy of my app.

I set the following code on the search button in the Main Menu component and on the search result list in the Search Customer component.

var panelObj = {dialog.object}.getPanelObject();
{dialog.object}._state = panelObj.getState();

I then set the following code in a button labeled "Back" in the header of the main menu panel.

var panelObj = {dialog.object}.getPanelObject();
panelObj.setState({dialog.object}._state);

I also set the same code from the search customer option in the search result list.

var panelObj = {dialog.object}.getPanelObject();
{dialog.object}._state = panelObj.getState();

The back button works when clicked from the search customer component, but does not correctly work from the customer form component as it brings you back to the main menu and not search component.

Am I doing something wrong?

[Davidk]

Re: Backwards Navigation

I love sample apps... thanks.

So... your starting point is the MainMenu UX... right?

You click Search (for example) and the Search UX is pulled in. Clicking Back takes you back to the Main Menu and you see the Welcome message.

While in Search, you search for something and you get the FormCustomer UX. Clicking Back takes you back to Search. Clicking Back again takes you to the Main Menu.

Is this right?

[MDolan]

Re: Backwards Navigation

That's correct.

However at the moment pressing back from the FormCustomer UX takes you back to the Main Menu and not the Search.

[Davidk]

Re: Backwards Navigation

The .getState and .setState methods will not operate on rendered UX components in panels.

However, let's "swipe" (sooo funny) the general idea and save where we are before we leave.

In the MenuListADCO List control, onClick event... remove the the .getstate stuff.

Add this before your runAction...

{dialog.Object}._currWorkspace = "MainMenu";

Here we are using the {dialog.Object} namespace to set a property named "_currWorkspace" and we assign as value to it of where we currently are. We're in the main menu.

So, clicking the Search button will fire off this code and load the Search UX.

In the MainMenu Client-side, onRenderComplete event put this...

{dialog.Object}._currWorkspace = "MainMenu";

This just sets up a default starting point.

In the MainMenu Back button, have just this code...

switch({dialog.Object}._currWorkspace) {
    case 'MainMenu':
    		{dialog.object}.panelSetActive('HOMESCREEN', true);
        break;
    case 'Search':
        {dialog.object}.runAction('BTN_Search');
        break;
}

Clicking the back button will test _currWorkspace, find that you want to go back to "MainMenu" and load that panel.

Next... while in the Search UX... clicking a row loads the FormCustomer UX.

So... in the SearchResultList List control, onClick event... we need to do something cool...

var po = {dialog.object}.getParentObject();
if (po){
	po._currWorkspace = "Search";
}	

{dialog.object}.runAction('Open searchcustomer component');

We need to get our Parent dialog object... because that's where the back button is.
We get our parent... and reset the _currWorkspace property to "Search" because that's where we now want to go back to.

So, I think setting _currWorkspace to where you are, before you leave, will let you return there.

There's probably a few other wrinkles, but this should get you going.

[MDolan]

Re: Backwards Navigation

First off...I'd just like to say thank you so much for helping me with this issue. I really do appreciate it.

Sadly I'm still having issues with navigating backwards successfully.

Using your method I'm able to the the following.

Go from the main menu to the search customer back to the main menu.
FromSearchBackToMainMenu.PNG

Go from the main menu to the search customer to the customer back to the search customer.
FromCustomerBackToSearch.PNG

What I can't do is go from the main menu to the search customer to the customer back to the main menu.
FromCustomerBackToSearchBackToMainMenu.PNG

I've been doing a hell of a lot of research on this issue and can't find many answers. So this leads me to believe that there is something wrong with the layout of my application. My idea was to have one single header for the App with controls for a slide out navigator and a back button, then open all subsequent components in blank panels known as workspaces.

Is there an easier way to layout an application and navigate accordingly? Or is there a "best practice" for UX applications? Should I create a header for each panel and ignore the one single header approach?

[Davidk]

Re: Backwards Navigation

I probably missed outlining a step somewhere... probably in the Search UX onRenderComplete. Anyway... attached is your project which moves from Main to Search to CustDetails back to Search back to Main.

Your layout is different because you're keeping that MainMenu header, which is the parent object, and loading children dynamically. You need to keep that in mind when moving around. You then have a parent object and a child object.

Depending on how large your application will be you can put all controls into multiple panels in one UX. Or put embedded components into panels in a UX.

There's probably more to your app than in this sample... but if just this sample then I would discard the use of the search and customer UX components.

I'd put the search list control into a panel and use that List control's "Has detail view" in place of the FormCustomer UX.

[MDolan]

Re: Backwards Navigation

Thanks again for your help David!

The sample app I sent you is just the start of the project. I'm building a very large CRM that will need to contain about 17 search ux components like the Search Customer component in the sample. Each one of those search components will help the user find a series of forms and queues. Another issue is that the same ux components will need to be opened from multiple parent objects. Since the final app will be so large I wanted to make sure users had an easy method of navigation.

I'll spend the next few days dissecting the method you provided me.