Showing results for 
Search instead for 
Did you mean: 

How to use Card and Card Grid with services?

I would like to use Card and Card Gird of App Designer with JSON services. I can build my own JSON services successfully, and can put in List also. But it is a little hard to understand how to make a multiple Card with a set of fields which bind to JSON service parameters. I find no tutorial of it. Could somebody show me an example? 

Thank you.


Tags (2)
0 Kudos
1 Reply

When App Designer is open the main toolbar has a large help button (the question mark  ( ? )). Under that help button you'll find a list of App Designer videos, and there are several dedicated to services.  For example:

Assuming you have defined a service request instance in the Web Services panel, then in App Designer you'll see that service instance listed in its own "Service Methods" control. And you'll also see select service-ready controls, like the Card , with a "Service Method" field.

So, for a Card Grid, do the following:

  1. Make a service instance in the Web Service pane. Be sure to select some of the data fields you will want later. 
  2. In App Designer, insert the Card Grid into your page.
  3. Click _into_ the grid and choose the first card.
  4. That card can be configured with header/footer and sidebars. Turn them on as you need.
  5. From the cards "Service Method" control select your service instance.
  6. More controls will appear. If you want one card per array entry, you want the Controller Type to be "multiple"
  7. And after that choose the array path.
  8. Now the Card Grid and Card are just layout. They don't have any real data. So you'll need to drag another widget.  Drag some widget _into_ that first card.
  9. Now that widget, because it is nested in a data fed Card will have those entry selectors available. Use them where you want in the properties.  
  10. Preview in the Emulator. You'll see one card per service entry result and each card will have your widget and each widget will display whatever unique data you chose.  
  11. These bullet points will make more sense after viewing the video.

Hope this helps,