Service - where to place code to go from list to entry detail

[Geoff_at_CFM]

I've defined a data service for a REST API call and it is working fine and shows a list of results in my app.

I selected "Angular" to do the databinding between my list and service, what and where do I place the code to go from the list to a page showing the detail record so that I have access to the services current "entry" ?

[Chris_P_Intel]

If you are using the Design View and one of the ListViews provided by the various frameworks, then when the ListView consumes the service, it will also _produce_ a service which is a service with one entry: the user selection. You should see that in the Service Methods control.

Use _that_ service to drive data.  Drag it to the control you want to configure. 

The Service Videos in App Designer demonstrate this technique.

[Geoff_at_CFM]

Yep, I've done all that, what I am asking is where do I place the code so that when I click on one of the list entries I can activate_page("#entryDetailPage") because there is nowhere in the list to specify the "Interactivity" for the clicked list entry.

The video demonstrates how to set up a filter for the list, but it doesn't demonstrate how to go from the list to the detail for the entry.

In the www/xdk/ad/angular_support.js file there is this bit of code in the function get_group_view_controller(...

            $scope.entries = [];

            var click_handler_f = data_event_handlers.on_click_proplist[event_key](selector);
            var action_f = null; //get_event_handler(selector);

            $scope.select_entry = function($event, entry)
            {
                if(click_handler_f){ click_handler_f(entry); }
                if(action_f){ action_f($event); }

            };

...so where/how exactly do I add the code that sets the click_handlers_f for the list of entries?

.

[Chris_P_Intel]

Just click the list entry in the Interactivity panel and apply a custom script to it. Click Edit Script to edit it.

You'll see your event handler: 

$(document).on("click", ".uib_w_2", function(evt)
    {
        /* your code goes here */ 
         return false;
    });

Now if you want access to the 'entry' which is the data object that has the data that is driving a particular list item, use the data_support.entry_from_$this() function

$(document).on("click", ".uib_w_2", function(evt)
    {
        /* your code goes here */ 
         var entry  = data_support.entry_from_$this($(this), ".uib_w_2");
        //entry will have what you need.
         return false;
    });

The entry_from_$this() function takes two arguments: 

• the 'this' DOMNode object of the event handler function, wrapped by jQuery.  (ie: $(this) )
• the selector used to initialize the data.  You'll find that in xdk/ad/index_setup_services.js   It the list item is the thing that is having both the custom script and the service method to it, it's the same. 

My apologies if some of this is obscure. We are trying to make it as simple as possible, yet still support multiple UI frameworks and two very different MVC libraries. 

[Geoff_at_CFM]

CHRIS P. (Intel) wrote:

Just click the list entry in the Interactivity panel and apply a custom script to it. Click Edit Script to edit it.

If there was an entry in the Interactivity panel for my list, I wouldn't be asking how to do it! <g>

I'll try what you've suggested (but I have my doubts that it will work with the AngularJS methods used by the services because they don't use jQuery for interactivity?)

While the XDK services are good in theory, it is SO MUCH easier to set up services with a bit of code in Ionic/AngularJS. The little bit of benefit provided by dragging and dropping services onto controls in the XDK is not worth the effort to set it up and use it - IMHO.

[Chris_P_Intel]

While the XDK services are good in theory, it is SO MUCH easier to set up services with a bit of code in Ionic/AngularJS. The little bit of benefit provided by dragging and dropping services onto controls in the XDK is not worth the effort to set it up and use it - IMHO.

I wonder about this sort of thing as well. In particular, if you are doing something advanced or sophisticated, then you simply have to work with Angular or Backbone directly, and at all stages - the request, the event bus, the set up, the propagation, the rendering.  

But in simpler cases, the Web Services browser combined with the drag/drop setup is a huge timesaver. So much simpler and far less rooting through websites for that RESTful API call, this directive, that handler, etc.  

However, while helping in the simpler cases is welcome, that limitation is unsatisfactory (to me) and I definitely am looking for ideas on how to improve it. Especially ideas that help people who want to code by hand. 

[Geoff_at_CFM]

Thanks Chris, I really appreciate the effort you guys are putting into support on the forum!

I spent a while experimenting with the XDK service method, and I'm sure it's a great feature for pre-defined services, but as soon as we need to use a custom service we'll need to dig into the service methods anyway.

Have a look at https://www.udemy.com/ionic-by-example/ -​ exercise 13 (currently available for public viewing) - it makes using services look simple, in comparison to the XDK method, setup and associated complicated code.

PS, the Reddit REST service is a good example to use because it is publically available. The Rotten Tomatoes example you use in your videos is not so useful because many of us (outside of USA) can't get a key to use it, so it is hard to follow along.

[PaulF_IntelCorp]

Geoff -- thanks for the reference to the Reddit service for examples, our Rotten Tomatoes example definitely needs to be changed. When it was put together it was very easy to get API keys were easy to get from Mashery. Unfortunately, that is no longer the case. :-(

[David_S_18]

I'm trying to do the same thing - go from a list of Avatar List items to a details page where I use the entries of the index corresponding to what list item I select.

I have both the master and detail page done but there is not item under the Interactivity panel for clicking on the list item.

I have seen a list item previously when experimenting with lists but for whatever reason it's now showing now.

A bit more detail, I created the list of Avatar list items by first dragging in a List and then moving a List Avatar item into one of the places on the list and then delete all the the other three normal list items that had originally populated this list.  This is a fairly awkward way to do it...difficult to get what you want.  It would be much better if the list item had a property for the type of List Item you want to have populate the list (e.g. List Item Avatar, List Item Button, etc).

Is there a better way to set up a list of List Items Avatars that will be populated from a web service?

Anyway, if you could help me figure out why the List item isn't appearing under the Interactivity panel that would be helpful.  I'm using the Ionic Framework.

[David_S_18]

A bit more info.  When you're using App Framework 3 the list items show up under Interactions but they don't when you're using Ionic Framework

[Geoff_at_CFM]

Geoff at CFM wrote:

Have a look at https://www.udemy.com/ionic-by-example/ -​ exercise 13 (currently available for public viewing) - it makes using services look simple, in comparison to the XDK method, setup and associated complicated code.

This technique is so much simpler than messing around with XDK services.