Answered

customizable tutorial template

(1) Share

Report

Posted on by Community Power Pla... Microsoft Employee

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.

Andy

Categories:

Building Power Apps

I have the same question (0)

All responses (21)

Answers (1)

Sort by

CarlosFigueira Microsoft Employee on at

Like
a
(5)

Report
Copy link

Link copied!

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!

Was this reply helpful? Yes No
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

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

Sample Layout.docx

Was this reply helpful? Yes No
CarlosFigueira Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

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?

Was this reply helpful? Yes No
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

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.

Was this reply helpful? Yes No
Verified answer

CarlosFigueira Microsoft Employee on at

Like
a
(1)

Report
Copy link

Link copied!
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:

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)

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.

Was this reply helpful? Yes No
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

Thank you Carlos

I will try option one as a start

Was this reply helpful? Yes No
JohnathonHarrel 5 on at

Like
a
(1)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
wizardwalksby 34 on at

Like
a
(0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
Community Power Pla... Microsoft Employee on at

Like
a
(1)

Report
Copy link

Link copied!

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".

Was this reply helpful? Yes No
john4 23 on at

Like
a
(0)

Report
Copy link

Link copied!

I'm trying to use your code and I've substituted my home screen name, but no luck. Where are you inserting the code?

Was this reply helpful? Yes No