Dynamic Data & Image Loading

edited August 21 in Technical questions

I need to create a page that asks the user to input a string (Movie Title), the application will call a RESTful service with the input string and respond with JSON.

Here's an example of the response:

{
    "hitCount": 1,
    "hits": [{
        "program": {
            "assetId": "XXXXXXXXXXX",
            "type": "Feature Film",
            "title": "Irresistible",
            "releaseYear": 2020,
            "releaseDate": "2020-06-26",
            "titleLang": "en",
            "descriptionLang": "en",
            "entityType": "Movie",
            "genres": ["Comedy"],
            "longDescription": "A Democratic political consultant helps a retired Marine colonel run for mayor in a small Wisconsin town.",
            "shortDescription": "A political consultant helps a retired Marine colonel run for mayor in a small Wisconsin town.",
            "topCast": ["Steve Carell", "Rose Byrne", "Chris Cooper"],
            "directors": ["Jon Stewart"],
            "officialUrl": "https://www.focusfeatures.com/irresistible",
            "ratings": [{
                "body": "Motion Picture Association of America",
                "code": "R"
            }],
            "advisories": ["Adult Language", "Adult Situations"],
            "runTime": "PT01H41M",
            "preferredImage": {
                "width": "240",
                "height": "360",
                "uri": "http://imagesformovies.com/pics/tt1171717_bb_xx.jpg",
                "category": "VOD Art",
                "text": "yes",
                "primary": "true"
            }
        }
    }]
} 

I would like to display the program attributes in a nice clean format and place the preferrredImage URI in a box at the top.

If I already have the webservice that returns this data, is this something I can do in a prebuilt component or do I need to write this widget from scratch?

My initial thought was that there might be some Human Resources app/module where I might change Departments to Movie/Film, then the actors/cast map to staff.

Comments

  • edited August 21

    Alas, it looks like there just aren't any easy ways to relabel the existing apps for any other purpose.

    While the presentations of the various demos are very cool ('https://webix.com/demos/'), none of them come with instructions on how to reuse them for any purpose (look, datasource, mechanics) other than their originally envisioned product design.

  • Hello @McNoober,

    If I already have the webservice that returns this data, is this something I can do in a prebuilt component or do I need to write this widget from scratch?
    My initial thought was that there might be some Human Resources app/module where I might change Departments to Movie/Film, then the actors/cast map to staff.

    I must say, there is no purpose-built component that would let you achieve this, as your use case is pretty specific.

    Fortunately, it shouldn't be hard to write a simple app that would let you achieve your end goal. Considering the described use case, it seems like using a Form to collect the values and using these values to issue an appropriate server request is the way to go. Here is a very basic example showcasing this idea: https://snippet.webix.com/eesok5y8.

    I would like to display the program attributes in a nice clean format and place the preferrredImage URI in a box at the top.

    Does this mean that after the response has been received on the client-side, it should be used to construct a box at the top using the provided parameters? The full use case would look something like the following: an input is shown to the user -> user inputs the data -> response is received on the client -> remove previous ui elements (like the initial input) and replace them with an image box. Is that correct?

    While the presentations of the various demos are very cool ('https://webix.com/demos/'), none of them come with instructions on how to reuse them for any purpose (look, datasource, mechanics) other than their originally envisioned product design.

    Our demos are mostly meant for demonstration purposes, with an added ability to look through the source code (for some of them). The demos in question are pretty specific, and, as you have correctly noted, may not be highly reusable.

    I recommend visiting our documentation for a number of written guides that should help you get acquainted with the library - https://docs.webix.com/desktop__basic_tasks.html. We also have a few interactive tutorials that that should help you get started at first - https://webix.com/tutorials/. If you are interested in customized solutions and the instructions on how to implement them, I can recommend visiting our blog, as we frequently post about various edge cases and describe the implementations in full detail (while also providing the source code).

  • @Dzmitry , Thanks for answering my question. In the end, I managed to build the application I needed by looking at your demos for inspiration. I must admit they are very nice, with good fortune, and time, I might build something just half as cool.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!