Log in

MDriven Movie Theatre Part 2

From MDrivenWiki

Part 2 of building an AngularJS app with MDriven Turnkey. At this point, using the movie ticket example, we could select and reserve tickets, but what we want to do now is to add view override, making UI more user-friendly and efficient.

To make your experience more comfortable, we set the main tags mentioned in the video to the right bar menu of this mini player. Choose the interesting subtitle on the list and immediately get to the exact theme navigation-itemplace in the video. Now you can pick any topic to be instructed without watching the whole video.

Adding a view override Development Page Setting the external JavaScript and CSS AngularJS ToggleSeat action (jsToggleSeat) Background in UI Adding an animation (Busy Animation)

Adding a view override

We can simply add a new text file in the external override pages folder with the same name as our view model

buy tickets.cshtml 

in the external override pages this will be empty and can just write anything here. To get back to the original content just 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 development page where we can look at each view model and see in details all the usable angular widgets. Picking one of these and override it anyway we want. Likewise, we use the widget for the image, the data in grid for show ticket and seat list as well.

Also there is another way to display the picked seats. Let's Google for any seat reservation JavaScript template. Download that, check what it contains (CSS and JavaScript), check the license. Lastly, save that to the web application content folder.

Now we are able to use the script and CSS as the sample in our application - it's injected the seat map div found in the document ready and it's created a lot of data.

It's important to remember that the sample script doesn't know anything of our data and that's usually the case with not data aware enough scripts. There is a lot of javascript pieces trying to keep UI widgets in place, still we're not really interested in them.

Looking at this CSS component, there is divs for each seat and styles to display, each row is also a CSS class to display. But we don't really need any of that complex UI logic in part of the control. It's 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 row equals one - that would mean that we have all the rows. And this kind of information is important for us.

From the seat to the shows we have the link object ShowSeat. Following that to the column for each row  that has a specific seats.

Let's add some states which we’ve got from the CSS., that the CSS wanted for different states, if it's selected unavailable or available, so we have pretty much based data rendering on what the CSS in this component expects. Having done that in a different copy of the old one, 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 just a 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 just sort of steel mark up from the downloaded component. Also here 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}}> 

We mimic how the component expects the HTML,  but we don't really care about the component, because this CSS will render as if it was the component that did it.

There are few things to display something in the seat, the role as checkbox - we copy this as well and the data from our site. So having done that, refresh the page and check it up.

Now if we click the seats - they are dead, let's fix that by setting click toggle seat.

We are going to do small script here in the page

<script> function ToggleSeat(theelement) 
    var the scope = angular.element(theelement).scope(); 
    thescope.root.jsClickSeat =; 
    thescope.$apply(function () { 
             thescope.root.VM.Execute_Post(‘BuyTickets2’, ‘jsToggleSeat”);  

In the toggle seat we first need to hold of the angular scope, getting it from the element.

Once we have that we get full access to our data, under the root tag.

jsClickedSeat assigned the - 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 one will happen every time we push any buttons.

Continue on improving UI, we can add some kind of "busy" animation.

→ Google and download some examples

→ get that one in our content folder

→ add a div with new image, which source one folder up / content / filename.

But this shouldn't show all the time, it should show when we use angular show, we are in the scope, so we just


We need to define that in our data, adding column name ShowBusyAnimation. Finally, we should show the busy animation when current seat request has state equals to request process.


Upload the model to the cloud and check the page.

So that's just about how easy it is to do pretty much 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 a very good thing, if you want to do systems that going to live for 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.