Left Navigation Navigate to

[sajarac]

Hi All,

I have followed this video, and I was able to build my left navigation component. However in my app I have 5 buttons 3 of them for the onselect property navigate to a selected screen and the other one open a share point library. And the last one open a PDF file. 

My question is ? how can I change the icons to perform those actions?

OnStart property :

Collect( NavBar, Table( { Title: "Home", Screen: WelcomeScreen, Icon: Home }, In my case I need the icon instead of navigate to the screen, launch an URL. I have changed Screen to Target, but by doing this the app open the URL on the start action.

Thanks in advance for any help.

Regards

[rebeccas]

You might try storing an Action: column instead of just the screen name. 

Then one action could be "Navigate(WelcomeScreen, Cover)" and then one might be Launch("Sitelocation"). You have to put more detail than you have now in your collection but it would give you more versatility. 

[sajarac]

Hi,

Thank you very much for your prompt response.

However, could you please explain a little bit more about your solution?

[RandyHayes]

@sajarac 

As always...skip the collections, you're not trying to build a database, you're building a menu!

I would suggest exploring using the new behavioral actions of components for your nav menu as they will provide you much more flexibility in what you want.  That video is old and does not incorporate them in.

When you say "open a share point library", does this mean launch a browser to a list or is this something else that I am not understanding?

[sajarac]

Hey @RandyHayes , thank you very much. 

Yes. you are correct. it launch a browser URL. 

[RandyHayes]

@sajarac 

So you will need to specify the screen name for navigates and the target name for the launch.  These would be two separate columns in your menu record as one is a screen record and one is text.

[sajarac]

Ok,

I currently have this:

And OnStart =

Collect(
NavBar,
Table(
{
Title: "Home",
Screen: WelcomeScreen,
Icon: Home
},
{
Title: "New Announcements",
Screen: WelcomeScreen,
Icon: DocumentWithContent
},
{
Title: "Active Customers",
Screen: ActiveRostersScreen,
Icon: OfficeBuilding
},

So you mean something like this?

{
Title: "Home",
Screen: WelcomeScreen,
Icon: Home,

Target: URL Here?
},

If I do this, the app will open the URL automatically every time that the app is initiated. 

[RandyHayes]

@sajarac 

What is the definition of the NavItems table in your component?

[sajarac]

Sorry, you mean this?

[RandyHayes]

@sajarac 

Ah yes - there is an issue.  You have NavBar as the NavItems property value of your component.  This is bad practice as it breaks the concept of components by relying on the current app as it definer of schema.  Avoid doing this as it will cause all kinds of issues.

Your NavItems should be:

Table(
   {Title: "Item1", Screen: App.ActiveScreen, Icon: Icon.Home, Target:"", Type:"Nav"},
   {Title: "Item2", Screen: App.ActiveScreen, Icon: Icon.Globe, Target:"http://something.com", Type:"Launch"}
)

The Items property of your Gallery should be : Parent.NavItems

The OnSelect of the Gallery, you should have:

Switch(ThisItem.Type,
   "Nav", Navigate(ThisItem.Screen),
   "Launch", Launch(ThisItem.Target)
)

In your app, set the OnStart to:

Set(NavBar,
    Table(
       {Title: "Home", Screen: WelcomeScreen, Icon: Icon.Home, Target:"", Type:"Nav"},
       {Title: "New Announcements", Screen: WelcomeScreen, Icon: Icon.DocumentWithContent, Target:"", Type:"Nav"},
       {Title: "Active Customers", Screen: ActiveRostersScreen, Icon: Icon.OfficeBuilding, Target:"", Type:"Nav"},
       {Title: "SharePointList", Screen: App.ActiveScreen, Icon: Icon.Globe, Target:"https://yourURL", Type: "Launch"}
)

(NOTE: use Set for a variable for this rather than adding the overhead of a in-memory database collection as this is all static information)