When the available seat is selected by the user the object value is changed using custom JavaScript code. Let b = new Date(tDate(ipaDate.getDate() + i)) So I created one app variable named ShowTime as a list of objects with times and provided initial values for it.Īs we need varying dates, I have added one custom JavaScript logic to get one week of dates from the current date and set it to a page variable for display when the page is mounted or focused and the page variable is empty.
BOOKED MOVIE MOVIE
Movie posters and movie titles are displayed using Image and Title base components from page parameters.įor show timing, I wanted to hardcode fixed times for all the movies. Movie poster, Movie title, Show timings, Movie Date and Seats navigation button. The Show Time page consists of five parts i.e. Navigating to next page with selected movie details as page parameters Now that the home page is completed, I need to navigate to the show time page when the book tickets container is clicked on the movie item container. This was achieved by creating a new container with position as absolute and Z-index as 1, and the visibility property is set to application variable flag, which gets set after some time when the page is mounted for the first time. I wanted a welcome screen to be displayed for a couple of seconds when the application opens for the first time. On the Home Page, after the navigation container, the list item container is repeated inside the scroll view based on the list retrieved from the REST API call using Get record Collection flow logic when the page is mounted. Schema of the details retrieved from the API So, Search is maintained in the Response Key path to retrieve only the necessary details into our application. We need to configure GET COLLECTION as the output will be multiple records based on the filter conditions passed during the API call.Īs you know from the API output image it is clear that we are getting the list of movie details in object format under JSON key Search. REST API direct integration resource Base details If we call the RESTful API using the above service, the output will be in JSON format, which consists of the movie list, total number of movies found and the response to our call.īelow are the configurations done in AppGyver as part of the REST API direct integration to get only the required information for our application. For movie details and posters, I am using OMDbAPI’s RESTful web service.
It has a list of movies running in cinemas. My application consists of a total of six pages. All the pages are stretched to the view port to occupy the entire screen width and height. So I wanted to do something new and came up with this movie ticket booking app.īuilt-in Navigation is disabled as I wanted a customized navigation tab consisting of a back button, brand name, and booking history icon. If we are learning any new programming language, the first application we will be creating is either a weather app or a to-do list. I wanted to learn front end UX/UI after working as an ABAP Developer for a long time and this challenge was a good fit for me to start with my front end journey.
BOOKED MOVIE CODE
This blog is my entry for the SAP Low Code No Code Challenge.The purpose of this blog is to share my learning and the experience I got while learning SAP AppGyver.
0 kommentar(er)
