This is Part 2 of building an AngularJS app with MDriven Turnkey. Using the movie ticket example, we can select and reserve tickets. What we want to do now is add view override, making UI more user-friendly and efficient.
To make your experience smooth, we set the main tags mentioned in the video to the right bar menu of this mini-player. Choose an interesting subtitle on the list and immediately get to the exact theme navigation item place in the video. Now you can pick any topic to be instructed on without watching the whole video.
Adding a View Override
We can simply add a new text file in the external override pages folder with the same name as our ViewModel.
buy tickets.cshtml
In the external override pages, this will be empty and we can write anything here. To get back to the original content, delete this override file and the system will revert to default. Although we are able to copy the content from the angular page dynamic template, the system will generate the data. However, there is also a development page where we can look at each ViewModel and see in detail all the usable angular widgets. Pick one of these and override it any way you want. Likewise, we use the widget for the image, and the data in the grid to show the ticket and seat list as well.
There is another way to display the picked seats. Let's Google for any seat reservation JavaScript template. Download the template, look through what it contains (CSS and JavaScript), and check the license. Lastly, save the template to the web application content folder.
Now we are able to use the script and CSS as the sample in our application. It has injected the seat map div found in the document ready and created a lot of data.
It is important to remember that the sample script doesn't know anything about our data as is usually the case with non-data-aware scripts. There are numerous javascript pieces trying to keep UI widgets in place - however, we're not interested in them.
Looking at this CSS component, there are divs for each seat and styles to display; each row is also a CSS class to display. We don't need any complex UI logic in part of the control. It is much better to trust our data; if we were to add a little data to our view model defining the rows,
Rows: self.ShowSeat ->(ss|ss.Seat.SeatInRow=1)
and select (every first seat in each row equals one), that would mean that we have all the rows. This kind of information is important t us.
From the seat to the shows, we have the link object ShowSeat. Follow that to the column for each row that has a specific seat.
Let's add some states which we have from the CSS, which the CSS wanted for different states. If it is selected available or unavailable, we have more or less based data rendering on what the CSS in this component expects. Having done that in a different copy of the old one, we need to use our new data transformation.
Using Angular, we are going to do our own thing with the seats.
Get a div to display the things in and div to angular repeat over "row in root.Rows", so each row in rows will be called row. We copy the things that I saw when I inspected the element of the other component. And for each row, I want to iterate over the columns and repeat, "col in row.Cols". We sort of steel mark up from the downloaded component. Also. we can inject some of our own things like “jsstate” that comes from our data and identity.
<div style=”display:inline-block”
<div ng-repeat="row in root.Rows" class=”seatCharts-row>
<div ng-repeat="col in row.Cols" tabindex=”-1” class=” seatCharts-seat seatCharts-cell front- seat seat{{col.jsstate}}” id ={{col.Id}}>
</div>
</div>
We mimic what the component expects from the HTML, but don't pay attention to the component, because this CSS will render as if it was the component that did it.
There are a few things to display something in the seat, the role as checkbox - we copy this as well and the data from our site. Having done that, refresh the page and check it out.
Now, if we click the seats, they are dead; let's fix that by setting click toggle seat.
We are going to do a small script here, on the page:
<script> function ToggleSeat(theelement)
{
var the scope = angular.element(theelement).scope();
thescope.root.jsClickSeat = theelement.id;
thescope.$apply(function () {
thescope.root.VM.Execute_Post(‘BuyTickets2’, ‘jsToggleSeat”);
})
}
</script>
In the toggle seat, we first need to hold off the angular scope, getting it from the element.
Once we have done that, we get full access to our data, under the root tag.
jsClickedSeat assigned the element.id - a piece of data we added in the ViewModel. It sets a variable vClickedSeat and then we have a js toggle action that uses the value of the variable.
So we are going to call an action as well jsToggleSeat - this will happen every time we push any buttons.
To continue improving our UI, we can add some kind of "busy" animation.
→ Google and download some examples
→ Get it in our content folder
→ Add a div with a new image, which sources one folder up/content/filename.
This shouldn't show all the time; it should show when we use angular show, we are in the scope, so we just "root.ShowBusyAnimation".
We need to define that in our data, adding the column name ShowBusyAnimation. Finally, we should show the busy animation when the current seat request has a state equals to request process.
vThisSeatRequest.State=’RequestProcess’
Upload the model to the cloud and check the page.
That's how easy it is to do relatively anything you want with your data. Of course, the web is full of CSS and JavaScript you can use together with an MDriven Turnkey while having full access to your data from any web page you need. This is very advantageous, especially if you want to create systems that last a long time. Even if you can afford to be a little bit sloppy in the UI, the data is still very strict and ordered.