en en en fi en fi en fi fi fr fi fi fi fi fi fi fi pl id fi fi fi fi eu fi fi fi fi fi fi de fi fi fi fi fi fi fi fi fi fi fi fi en en en fi en en en en en en en en en en en en en en en en en en en en en en en en en en fi fi fi fi fi en en en en en en en en en ca en en lt en en en en en en en kn fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi de fi fi fi fi fi fi en fi ms en en en en fi vo fi fi fi fi en en zh pl fi fi fi de id fi en fi fi sv fi fi da
UX Patterns: Image Slider Control | Microsoft Power Apps
Mehdi Slaoui Andaloussi, Principal Program Manager, tiistai 18. huhtikuuta 2017
Image slider is a popular control in web and mobile apps.  In our scenario, let’s imagine that we are introducing new features of an app. For that we will build an image slider with an indicator showing current slide and define an action for each slide. Using swipe gesture, you can navigate for slide to slide or you can hit the “Skip” or “Get Started”  button to go to the home screen.   The end result would look like this:
Add images that will be displayed in each slides. (Note: You can also skip this step and provide image urls when defining your data source)
We start by defining the data that represent each slide. We will do it inline here but this can also be fed from a custom API or some other connector.
UpdateContext({items:[{index:0,title:"If you see a heart icon, tap it to save as a favorite",image:Slide1,action:{name:"Skip",screen:HomeScreen}},{index:1,title:"Get important alerts at the top of your feed",image:Slide2,action:{name:"Skip",screen:HomeScreen}},{index:2,title:"Schedule time off and send your colleagues a calendar notification",image:Slide3,action:{name:"Get Started",screen:HomeScreen}}]})
The structure and names used here is arbitrary. If you are free to define the structure that fits your need. In the example above, I have a collection “items” with 3 items representing each slide. In each item, I define a title, an image and an action. The action will be used to wire up the “Skip” and “Get Started” buttons.
Let’s add a custom gallery with horizontal layout:
We add an image, a button and a textbox to the gallery template. Each of these elements will be bind to different properties :
We set few properties as follow:
We set the Items property of the gallery to items collection we defined earlier.
now, let’s focus on the indicator. For that, we create another horizontal gallery and we bind its Items property to the same items collection we defined earlier. We insert a circle (found under Icons) within the template gallery. At this point, you should see 3 dots. You will have to adjust the gallery TemplateSize (~28 or so) property to bring those circles closer together.
In order to synchronize the indicator with the gallery, we use the Default property as follow:
Default = LookUp(items,Value.index =introGallery.VisibleIndex-1) . This will in effect force the selected state of the indicator to match the slider gallery (named introGallery in this sample).
Finally, we style the little circle element used inside the gallery template as follow:
Check out the sample here
Bonus Exercise: You can add a timer to this control to automatically slide between images after some elapsed time.
Mikä on Power Apps?
Power Apps on palvelu, jonka avulla voi luoda ja käyttää mukautettuja yrityssovelluksia tietoihin yhdistämistä sekä verkko- ja mobiilityöskentelyä varten – ilman mukautetun ohjelmistokehityksen ajankäyttövaatimuksia ja kustannuksia.
Application Lifecycle Management (ALM)
Power Platform Admin Center
Aloita antamalla työ- tai opiskelukäyttäjätunnuksesi.
Rekisteröitymällä hyväksyt palvelun käyttöehdot.
čeština dansk Deutsch (Österreich) Deutsch (Schweiz) Deutsch (Deutschland) Eλλnvιkά English (Australia) English (Canada) English (Cyprus) English (UK) English (Ireland) English (India) English (Malaysia) English (New Zealand) English (Singapore) English (US) English (South Africa) español (España) español (México) français (Belgique) français (Canada) français (Suisse) français (France) suomi magyar italiano (Svizzera) italiano (Italia) 日本語 한국어 norsk bokmål Nederlands (België) Nederlands (Nederland) polski português (Brasil) português (Portugal) pycckий svenska ไทย Türkçe 中文(简体) 中文(繁體) العربية עברית