View source for Training:Bootcamp:Chapter 5

{{Edited|July|12|2025}}
<message>Write the content here to display this box</message>
This is '''Chapter 5'''. You may want to start at the beginning: [[Training:Bootcamp:Chapter 1|Chapter 1]], or see [[Training:Bootcamp:Chapter 4|Chapter 4 (the previous chapter)]]. 

=== '''Video 5: Different Types of Actions''' ===
<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/nxQaIjYWuus?si=ogdT6pyxc5I70JkU" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="video__navigation">
 <span data-video="nxQaIjYWuus" data-start="00" tabindex="0"> <strong> Steps 146 - 182 </strong> </span>
    <span class="navigation-item" data-video="nxQaIjYWuus" data-start="00" tabindex="0"> Introduction </span>
    <span class="navigation-item" data-video="nxQaIjYWuus" data-start="09" tabindex="0"> Global actions </span>
    <span class="navigation-item" data-video="nxQaIjYWuus" data-start="417" tabindex="0"> Ways to bring up ViewModels </span>
    <span class="navigation-item" data-video="nxQaIjYWuus" data-start="698" tabindex="0"> Sorting </span>
    <span class="navigation-item" data-video="nxQaIjYWuus" data-start="874" tabindex="0"> Class actions </span>
    <span class="navigation-item" data-video="nxQaIjYWuus" data-start="1585" tabindex="0"> ViewModel actions </span>
    <span class="navigation-item" data-video="nxQaIjYWuus" data-start="1940" tabindex="0"> ViewModel placed button </span>
  </div>
</div>

</html>

== Chapter 5: Actions and Navigating Between Views ==
'''NOTE:''' Click on the step/number to access the corresponding images.    

'''[[Training:Chapter 5 Images#Step 146|146]].''' We have seen how to adopt views from being AutoForms to becoming ViewModels you can control. Now, we will take a look at the actions that bring those views up for a user. 
* Look at the '''PersonSeeker''' from [[Training:Bootcamp:Chapter 4|Chapter 4]] in the ViewModelEditor, fold down the yellow Actions button, and note the blue '''/PersonSeeker''' link. Click it
'''[[Training:Chapter 5 Images#Step 147|147]].''' See the form that defines this action. Note the ActionName and change it to <code>PersonSeekerIAmInControl</code>.

'''[[Training:Chapter 5 Images#Step 148|148]].''' Note the generated MenuBar above the ActionName is also updated. 

'''[[Training:Chapter 5 Images#Step 149|149]].''' Notice the left-hand list in the form. These are the other [[Training:Global actions|GlobalActions]] currently defined. Click the one named '''AutoFormCarSeeker'''. 
* Note how the right-hand side now shows its name and definition.
'''150.''' There are three types of actions; these two actions are of the Global type.  
 '''A GlobalAction is called Global since it will be shown in the top-level Global menu.'''
'''[[Training:Chapter 5 Images#Step 151|151]].''' Close the yellow GlobalAction form and go back to the model diagram. Click the Cog-wheels-tool-button; note how this brings up the same form again.

'''[[Training:Chapter 5 Images#Step 152|152]].''' Select the '''AutoFormCarSeeker''' action. Observe how it does not show in the rendered MainMenu and that it is defined to be in a MenuGroup called '''AutoForms'''. 
* Change the MenuGroup of the action to none/blank/empty. 
* Note that the action now shows next to '''PersonSeeker'''. 
* Change it back by pressing Ctrl+Z (undo) or do it manually.
'''[[Training:Chapter 5 Images#Step 153|153]].''' Select the '''PersonSeeker''' action in the list. Press the three-dot button ('''...''') next to the MenuGroup choice - this brings up the <u>EditMenuGroup</u> dialog. Press <u>Add menu group</u>, name it <code>IControlTheMenuGrouping/AtAllLevels</code>, and close the dialog.

'''[[Training:Chapter 5 Images#Step 154|154]].''' Set the '''MenuGroup''' on the '''PersonSeeker''' action to <code>IControlTheMenuGrouping/AtAllLevels</code>.  
* Check the top-rendered menu and find the <code>IControlTheMenuGrouping</code>.  
* Click it to open it and note the sublevel <u>AtAllLevels</u>.  
* Click to open; notice the '''PersonSeeker''' action under this submenu. 
'''[[Training:Chapter 5 Images#Step 155 and 156|155]].''' Note that the '''PersonSeeker''' action is now gone from the top level - the Global action will only be in one place in the top menu. 

'''[[Training:Chapter 5 Images#Step 155 and 156|156]].''' Note that the '''PersonSeeker''' action has a <u>Bring Up View Model</u> setting under the header '''What the action does'''.

'''[[Training:Chapter 5 Images#Step 157|157]].''' Press the three-dot button next to the <u>Bring Up View Model</u>.  
* Note that the ViewModel Editor is brought into focus, showing the ViewModel that was chosen for the action.  
** Go back to the Action dialog (step 146, or just alt-tab). 
'''[[Training:Chapter 5 Images#Step 158|158]].''' Change the <u>Bring Up View Model</u> value to Index. Verify that you get the ViewModel Editor showing the Index ViewModel when you press the three-dots button ('''...''').

'''[[Training:Chapter 5 Images#Step 159|159]].''' Go back to the Action dialog and undo the change. Now, go into the rendered top menu, find the '''PersonSeeker''' action, and note the ViewModel icon next to it. Click on the icon.  
* Note that you get to the ViewModel Editor with the correct form showing. 
'''[[Training:Chapter 5 Images#Step 160|160]].''' Select the Exit-action in the left list. Now go into the rendered top menu, find the '''PersonSeeker''' action, and click - not on the icon, but on the text of the rendered action. 
* Note that the GlobalAction form has now selected the '''PersonSeeker''' action.
'''[[Training:Chapter 5 Images#Step 161|161]].''' Create a new GlobalAction with the top left Add Global Action button. Name it <code>PersonSeekerAgain</code>, set the <u>BringsUpViewModel</u> to '''PersonSeeker''', and set its Menu group to '''IControlTheMenuGrouping/AtAllLevels'''. 
* Check the rendered menu - where did it show up?
'''[[Training:Chapter 5 Images#Step 162|162]].''' Set the <u>BringUpViewModel</u> to '''PersonSeeker'''.

'''[[Training:Chapter 5 Images#Step 163|163]].''' Save and check in the Browser in your running app.

'''[[Training:Chapter 5 Images#Step 164|164]].''' Set the <u>DividerGroupWithinMenu</u> to '''SomeName''' on '''PersonSeekerAgain'''. Save and check the web app.  

'''[[Training:Chapter 5 Images#Step 165|165]].''' Set the <u>DividerGroupWithinMenu</u> to '''SomeName''' on '''PersonSeekerIAmInControl'''. Save and check the web app.  

'''[[Training:Chapter 5 Images#Step 166|166]].''' DividerGroup introduces sections. To order actions, use Sort order in the group. Set '''<span class="col-turquoise">AAA</span>''' on one and '''<span class="col-turquoise">BBB</span>''' on the other. Save and check the web. 

'''[[Training:Chapter 5 Images#Step 167|167]].''' Switch the <span class="col-turquoise">'''AAA'''</span> and <span class="col-turquoise">'''BBB'''</span> on the actions. Make sure you understand how to control the order.

'''168.''' As stated earlier, there are three types of actions. We have looked at one of them - the '''GlobalAction'''. GlobalActions only end up in the GlobalMenu. Now, we will look at [[Documentation:Class actions|Class actions]].  
 '''Class actions are type specific. A Class action belongs to a Class and all objects of that class can see/use this action.'''
'''[[Training:Chapter 5 Images#Step 169|169]].''' Go back to ViewModel '''PersonSeeker''', fold down actions, note the 2 <u>ShowPerson</u> links in Person-Nesting, and click either one. 

'''[[Training:Chapter 5 Images#Step 170|170]].''' A new but similar action form shows up, listing all class actions for class '''Person'''. There are 2 <u>ShowPerson</u> actions. One is one we got from '''AdoptThisViewModelAndMakeItOurOwn'''. This function also copies some of the actions associated with the definition we adopted. Rename the one that does NOT bring up autoform to <code>ShowPersonIAmInControl</code>.

'''[[Training:Chapter 5 Images#Step 171|171]].''' Back in ViewModelEditor, note that the name is updated and the parenthesis with the class name '''Person''' within - this is how you recognise a Class action. These class actions both belong to the '''Person''' class.  

'''[[Training:Chapter 5 Images#Step 172|172]].''' Change the class of the nesting to '''Car'''. 
* Ignore the many errors. 
* Notice that '''Person'''-actions disappear and '''ShowCar''' shows up instead. Class actions are automatically shown depending on the type context. 
* Change the class of nesting back to '''Person'''. Save.
'''[[Training:Chapter 5 Images#Step 173|173]].''' Test the web and both actions. They bring up two different forms. In the form called only '''Person''', we see the same Class action again, taking us to the second form and vice versa. 

'''[[Training:Chapter 5 Images#Step 174|174]].''' Class actions show up directly as long as the type information is correct. This is what we often want, but not always. There is a way to opt-out, showing the action in a place where the type rules say it should show.  
* Look at the top of the Action definition - a list of ViewModel-places the type-information matches.  
* Notice the checkbox for opt-in. Make sure all levels are checked - on both actions for '''Person'''.  
* Save and check the web. 
'''[[Training:Chapter 5 Images#Step 175|175]].''' You can also opt-in/out actions in a ViewModel by pressing the arrow in front of the class action. Try it out. 

'''[[Training:Chapter 5 Images#Step 176|176]].''' You can opt back in from the ViewModel tree as well. Try this out.  
 '''The third type of action is the ViewModelAction (aka ContextAction). These actions are unique to a view.''' 
'''[[Training:Chapter 5 Images#Step 177|177]].''' Go to ViewModel '''Person''', fold down actions, and note the '''DeleteThis''' action. Double-click it. 

'''178.''' We can now see the third kind of Action form - still similar to the other two types - but the left side in this form resembles the ViewModel tree structure. This form also shows the matched Class actions for the ViewModel levels. You can only see the difference between Class-actions and true-ViewModelActions by the latter missing the class name behind it.

'''[[Training:Chapter 5 Images#Step 179|179]].''' In the '''DeleteThis''' ViewModel action, find the '''AreYouSure''' setting and set it to <code>"Wow - wanna delete this person?"</code>. Save. 
* Test the action on the web. Say <u>Cancel</u> on the question to delete.
'''[[Training:Chapter 5 Images#Step 180|180]].''' Since ViewModel actions are not limited by class, they can theoretically show up at any level of the ViewModel tree. We rarely want a ViewModelAction to show up on more than one level in the view. This is controlled in the Action editor - top right side - only on this level. 
* Change it from '''Person''' to '''Car'''. Save and test the web. 
* Now, the '''DeleteThis''' is only available when a car is selected. This is logically strange so change it back to '''Person'''.
'''[[Training:Chapter 5 Images#Step 181|181]].''' We have looked at the three different types of actions, but there is one more action-like thing: the ViewModel placed button, ViewModelEditor for '''Person'''-view. Add a button and name the column <code>DeleteMe</code>. Save. Check the web.

'''[[Training:Chapter 5 Images#Step 182|182]].''' Nothing happens since it has no expression in action language that does anything. We will connect this ButtonAction to the ViewModelAction '''DeleteThis''' by finding the <u>Is action</u> setting, and next to it, a picker where we optionally can make the button execute one of the actions available to us in the view. Choose '''DeleteThis'''. Save. Test the web.

=== Next Chapter ===
[[Training:Bootcamp:Chapter 6|Bootcamp:Chapter 6]]
[[Category:Bootcamp]]