customizable tutorial template

[Anonymous]

Hi

I have added a customizable tutorial screen using a screen template but I can not find any instructions, guides to edit it. I have searched an failed miserably. 

BR

Andy

[CarlosFigueira]

Hi Andy,

You can customize the steps in the tutorial screen by selecting the "dots" gallery (TutorialNavigator1) on the bottom of the screen, and updating its Items property. You can define a text and an image for each step in the tutorial page.

Hope this helps!

[Anonymous]

Thank you Carlos

Starting to make sense, how do I limit an image(s) to only appear on one page. I am trying to duplicate the layout as per the attached sample.

Thank you in advance

BR 

Andy

[CarlosFigueira]

I believe if you don't set the Image property of one of the "steps", then that step will not have an image. Is that what you're trying to accomplish?

[Anonymous]

Hi Carlos

Sorry for the delay in feeding back.

I want each step to have a different image, I want the pages to look like the attached document in my previous post.

[CarlosFigueira · Accepted solution]

That tutorial template can be used as-is for simple steps: 1 image and some text. If you want your text on different pages to have specific formatting, then it may not be as simple as adding some values there.

There are a couple of alternatives you can use:

1. Create different screens, one with each of the screens you want, and in the left/right arrows you would use the Navigate function to move between them. That's fairly simple to implement, although you may have a lot of screens in the beginning of your app (which may not be a bad thing)
2. Create one group of controls, in the same screen, for each of the "virtual screens" that you want, then set its Visible property to _guideStep = <virtual screen number>. This may be a little more complicated to organize (you'll have many controls at the same screen), but your app won't have lots of non-critical screens.

[Anonymous]

Thank you Carlos

I will try option one as a start

[JohnathonHarrel]

I just figured out how to do this by setting visibility based on the index of  _guideStep . This variable is linked to the position of the table/screen. justr add miltiple images to the card and set their visibility to  _guideStep = <index> 

EXAMPLE:

visibility property on image one would be  _guideStep =0

visibility property on image one would be  _guideStep =1

[wizardwalksby]

This is nice, but jeez how complicated can making a tutorial image visible be?

[Anonymous]

If anyone hasn't figured out how to get past the last screen use this code "

If(_guideStep = Last(TutorialNavigator1.AllItems).Step, Navigate(Home),Set(_guideStep, Last(TutorialNavigator1.AllItems).Step))" assuming your first screen is "Home".