View source for Training:Bootcamp:Chapter 13

{{Edited|July|12|2025}}
<message>Write the content here to display this box</message>
This is '''Chapter 13'''. Are you looking for the beginning? [[Training:Bootcamp:Chapter 1|Find it here: Chapter 1]], or [[Training:Bootcamp:Chapter 12|link to Chapter 12 (the previous chapter)]]

== Video 13: Add a Simple Graph to Your App ==
<html>

<p class="video-warn">
  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.
</p>

<div class="video">
  <div class="video__wrapper">
    <iframe src="https://www.youtube.com/embed/GTn8ymRnw-g?si=QX8VJjOYFPM6fk62" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="video__navigation">
 <span data-video="GTn8ymRnw-g" data-start="00" tabindex="0"> <strong> Steps 388 - 406 </strong> </span>
    <span class="navigation-item" data-video="GTn8ymRnw-g" data-start="00" tabindex="0"> Introduction </span>
    <span class="navigation-item" data-video="GTn8ymRnw-g" data-start="60" tabindex="0"> CarsAndBrands ViewModel </span>
    <span class="navigation-item" data-video="GTn8ymRnw-g" data-start="218" tabindex="0"> Adding ThisIsHtml column </span>
    <span class="navigation-item" data-video="GTn8ymRnw-g" data-start="681" tabindex="0"> Importing Html & CSS </span>
    <span class="navigation-item" data-video="GTn8ymRnw-g" data-start="2080" tabindex="0"> CarsAndBrandsSVG Viewmodel </span>
    <span class="navigation-item" data-video="GTn8ymRnw-g" data-start="2138" tabindex="0"> Inserting an SVG vertical bar chart </span>
  </div>
</div>

</html>

== Chapter 13: Add a Simple Data-Dependent HTML or SVG Graphic to Your App ==

* ''This is good for generating simple diagrams without needing more advanced components (which is easy - but not as easy as this).''
388. Verify that your model is without errors (red dots). If you have any, make sure you resolve them before moving on.   

389. Create a new ViewModel. Name it '''CarsAndBrands'''. Select class '''Car''' and leave it as not rooted.

390. Under "Actions leading here", select and add <span class="col-turquoise"><span class="col-black">Global Action for show</span></span> for this ViewModel.

391. Add a grid to show Car.allInstances, showing the registration number and the brand name.

* Add some columns. Click on '''<code><span class="col-black">asString : self.asString</span></code>''', then "Add column", choose '''BrandOfCar''', and select '''<code><span class="col-black">BrandOfCar_Name : self.BrandOfCar.Name</span></code>'''.
* Click on <code><span class="col-black">'''asString : self.asString'''</span></code><span class="col-black">,</span> then "Add column", choose <code><span class="col-black">'''RegistrationNumber : self.RegistrationNumber'''</span></code>.
* Drop '''<code><span class="col-black">asString : self.asString</span></code>''' – right click on the column and select <u>Delete column</u>. Save.
* Test your webapplication.

392. Add a static text column.

* Click on '''<code><span class="col-black">AllCar : Car.allinstances</span></code>''', then "Add column", select "Add generic column".
* Name it <code>'''<span class="col-black">ThisIsHtml</span>'''</code>.
* Drag the widget onto the grid and resize the “AllCar” widget (as shown in the video).

393. Search for and click on <span class="col-blue-dark">'''Tagged values'''</span> in the top menu.

* Select <code><span class="col-blue-dark">'''Refresh From Wiki'''</span></code>.
* In the options under "Add from Value Store", set the tagged value <code><span class="col-black">'''DataIsHtml=true'''</span></code> on the column by clicking "Add This".
* Set the value on the tag to '''True'''.

394. Try the expression <code>'''<span class="col-black">'<nowiki><div style="background:yellow;">hello</div></nowiki>'</span>'''</code> in the <code>'''<span class="col-black">ThisIsHtml</span>'''</code> column. Save. Verify you get a text ('''Hello''') with a yellow background in your app.

395. Use the '''AsSeparatedList''' expression to build a large string that displays all the cars. In the Expression box for <code><span class="col-black">'''ThisIsHtml'''</span></code>, write: 
 Car.allinstances->collect(c|
 'div style="background:yellow;">'+c.RegistrationNumber+'<nowiki></div></nowiki>'
 )->asSeparatedList( <nowiki>''</nowiki> )
Save and check your app. You should see all the cars highlighted in yellow.

396. Make a diagram in HTML. Find the page: https://www.coding-dude.com/wp/html5/bar-chart-html/ and look for the Bar Chart. Use the HTML and CSS found there.

* '''NOTE:''' the CSS is in LESS format and must be translated for the browser to understand it.
* Copy the CSS (in LESS format) to Notepad.
* Convert the CSS using this site: https://www.cssportal.com/less-to-css/
* Follow along with the video and check your results with the Code Snippet found [[Bootcamp: Chapter 13 - Code Snippets|here]].
* Save and test your app.

397. Do a simple test with the fixed data in the example and verify that you make that render on the page.

* '''Note''' that to MDriven-expressions, the HTML is just a string constant - you need single hyphens/quotes to declare this string.
* '''Note''' that if you want to use a hyphen ('''-''') inside a string constant in OCL, you can use a backslash ('''\''') in front of the single-quote, or in HTML/CSS, you can also use a double-quote to avoid the need for escape-sequencing with a backslash.

398. Use the '''GroupBy''' operator to group all cars by '''BrandOfCar'''.

* In the Expression box for the column <code><span class="col-black">AllCar : Car.allinstances</span></code>, write: <code><span class="col-black">'''Car.allInstances->groupby(c|c.BrandOfCar)'''</span></code>
* Click Ok. You may get this error message: <span class="col-turquoise"><span class="col-blue-dark">'''The column referred from AllCar has type Car but expected type was BrandOfCar.BrandOfCar+List Collection (Car)'''</span></span>
* To solve it, scroll down to '''Car : Car''' and change its class from '''<span class="col-black">Car</span>''' to "<span class="col-black">Derive type from referring column"</span>.
* Click on the column '''BrandOfCar''' and change the expression to: <code><span class="col-black">'''self.BrandOfCar.Name'''</span></code>.
* Go to the column for '''RegistrationNumber''' and change the expression to: <code><span class="col-black">'''self.List->size'''</span></code>.
* Change the name for '''RegistrationNumber''' to '''NumberOfCarsOfBrand'''. Save and note the changes in your app.

399. Collect over the result and create a string of the correct percentage value.

Go to the expression box for '''NumberOfCarsOfBrand''' and write:
 (100*self.List->size/Car.allinstances->size).Round(0).asstring+'%'
Save and check your app.

Go back to '''AllCar''' and write this expression:
 Car.allInstances->groupby(c|c.BrandOfCar)->collect(tuple|tuple.BrandOfCar.Name,(100*tuple.List->size/Car.allinstances->size).Round(0).asstring+'%') 
Note the errors. 

In the expression box for '''BrandOfCar_Name''', change the expression to <code>'''<span class="col-black">self.Name</span>'''</code>. 

Go to '''NumberOfCarsOfBrand''' and change the expression to <code>'''<span class="col-black">self.Part2</span>'''</code>. Save. 

Now, do a lot of string massage to inject the prepared HTML snippets instead of the hard-coded example values. (Follow the video and refer to the Code Snippet [[Training:Bootcamp: Chapter 13 - Code Snippet|'''here''']].)

400. Once you have it working - showing your data in the diagram - verify by opening a new window and creating a new car with a new brand.

* Ensure you see the new '''Car''' showing up in the data in your diagram.

401. Clean up the view so you only leave the diagram and don't have the helper columns.

* Delete column '''AllCar'''
* Scroll down and delete '''Car'''
* Shift and resize the <code><span class="col-black">'''ThisIsHtml'''</span></code> widget.
* Delete '''<Name>''' in the Presentation box. Save.
* Also, hide the left-hand actions. Click on '''CarsAndBrands''' and locate and tick the box next to '''HideSidebar'''. Save and test the web.

402. Make a copy of the '''CarsAndBrands''' view and name the copy <code>'''<span class="col-black">CarsAndBrandsSVG</span>'''</code>.

403. Add a global action to show for this ViewModel. Save and check your app. 

404. Find the page https://codepen.io/mdgrover/pen/eZENxO that shows an example of an SVG vertical bar chart.

405. Copy the CSS and HTML and replace your current values. Save. Verify that you can get the static example to show on your page.

406. Now, string massage this example to get it to show your data, following along with the video. Refer to the Code Snippet found [[Bootcamp: Chapter 13 - Code Snippets|here]].

'''NOTE:''' Familiarize yourself with the <u>Chrome Debugger</u> to ''fix'' your SVG-vertical Bar Chart. The Chrome Debugger will allow you to look at what the browser sees and determine whether your values are coming up the way they should.  

[[File:ModelAfterChapter13.zip|none|thumb]]

=== '''Next Chapter''' ===
[[Training:Bootcamp:Chapter 14|Bootcamp:Chapter 14]]


[[Category:Bootcamp Series (Step-by-Step Learning)]]
[[Category:Intermediate-Friendly]]
[[Category:Priority 50]]
[[Category:Tutorials & Learning Paths]]
[[Category:Bootcamp Chapters]]
[[Category:Priority 13]]