The 1000 steps program to MDriven Chapter 12

This is Chapter 12. Are you looking for the beginning? Find it here: Chapter 1, or link to Chapter 11 (the previous chapter)

Video 12: Add an Image Attribute to a Brand

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.

Steps 365 - 387 Introduction Adopting BrandOfCar Autoform Creating BrandImage BrandSeeker Removing the Autoforms Adding BrandImage Setting User Rights

Chapter 12: Add an Image Attribute to a Brand; Drop the AutoForms

In this chapter, we'll discuss how to add an image attribute to a brand, confirming that it shows in various places. We'll drop the AutoForms and ensure the access rights for editing checks who can set the brand and registration number.

365. Adopt the Autoform AutoFormBrandOfCar and rename it to ManageBrand.

366. Rename the Class action that brings that form up to have the same name as the form. You will get some errors.

367. Remove the “Cars” widget. Delete the “MultilinkCars” and “DeleteThis” actions that now show errors due to the use of vCurrent_<oldname>

368. Delete all the widgets except the Name widget.

369. Make sure you understand the opt-in/opt-out for actions.

370. Add a generic column and call it BrandImage.

  • In the Expression box, write: self.BrandImage
  • Select “Add new Attribute BrandImage” in the blue highlighted text in the bottom half of the debugger.
  • In the popup window, click on Type, choose “Blob” (add link to page), and click ok.
  • Press ok to exit the debugger.

371. Resize the Brand Image widget.

  • Remove the presentation from the BrandImage column.
  • Delete “<Name>” in the Presentation box.
  • Resize the widget again.

372. Back to the model, click on “BrandImage:Blob?” in BrandOfCar.

  • In the details to the right, look for “Mode” and select the blank box next to BlobType.
  • Choose “Image” in the drop-down menu.

373. Start the application. Once it’s running, select “Auto Form Brand Of Car Seeker”, click on the first car, and navigate to Manage Brand. You’ll see an image widget.

  • Click on the widget to search and upload a brand image from Google.
  • Do this for each car brand.

374. Add a new ViewModel to seek for BrandOfCar. Name it BrandSeeker and use the UIFirst to get a copy of SeekerAutoForm logic.

  • Delete the “AsString : self,asString” column.
  • Click on "ManageBrand"

375. In the ViewModel for BrandOfCar, click on the Global Action BrandSeeker. When the Global Actions window pops up, search the items under How the menu looks and where it is placed for “Sort order in Group” and write “x” in the box. Listen to the explanation to make sure you understand how Action order is handled in menus.

  • Under How the menu looks and where it is placed, search for Menu Group and click on the box with dots. In the EditMenuGroups popup box, write a “z” in the row next to IControltheMenuGrouping/AtAllLevels.
  • Click ok. You’ll see that the menu order has changed.
  • Go to the BrandSeeker ViewModel and delete the ChangeTime : self.ChangeTime, CreateTime : self.CreateTime, and Guid : self.Guid columns.

376. Drop all the AutoForms from the model. Go to BrandOfCar class and right-click on it. Scroll down to AutoForms and select “Drop AutoForms”. Save.

  • Note that many actions and ViewModels are now removed from the app.
  • Reload your webapplication to see the changes.

377. Note that the logic to jump on the first click is in effect whenever there is only 1 available navigating action.

378. Right-click on the BrandOfCar class and check the UsedBy list. Find out where BrandOfCar is used.

  • Add BrandImage to ProperCarView and delete “<Name>” in the Presentation box.
  • Place and resize the BrandImage button next to the Registration Number button.

379. Add BrandImage to CarTransferOwnershipDocument. Follow the steps in the video on how to add a column from the model. Make sure you try a few of the ways to find the proper expression for showing the BrandImage from the different contexts:

  1. "Add Column"
  2. "Add column from model"
  3. Type the expression manually.

380. In the CarSeeker ViewModel, change the name of “AsString” to Presentation. Add the BrandImage column. Save.

  • Follow the video to fix the NewCar action that does not have a view (since it pointed to an AutoForm that we dropped). Make it point to ProperCarView.

381. In the ProperCarView  ViewModel, add a nested ViewModel class and select “Singlelinks with setter”, then “BrandOfCar : BrandOfCar” to set the BrandOfCar link.

  • Drag the newly created button and place it above “Car Owner”.
  • Change the name for BrandOfCar2 to BrandOfCarForAdmin.

382. Note the access issues with ProperCarView - anyone can set the BrandOfCar.

383. Fix the ReadOnly expression to allow only the admin to change the BrandOfCar.

  • Click on the dotted box next to ReadOnly Expression.
  • In the popup window, write not SysSingleton .oclSingleton.CurrentUser.IsAdmin
  • Save.

384. Run the app. Check with your two users - a and b - where a is admin and b is not. Verify that you understand the ReadOnly expression.

385. Go back to the app and make the BrandOfCarForAdmin column invisible for anyone who's not the admin.

  • Do this by clicking in the FollowEnable box located next to the VisibleExpression. A tick/checkmark will appear.

386. Then, we discover that anyone can change the RegistrationNumber. Fix this by first setting the Access Group IsAdministrator on the action NewCar.

387. Move the read-only expression from combobox BrandOfCarForAdmin to the ReadOnly Expression for the ProperCarView ViewModel.

  • Select and cut not SysSingleton .oclSingleton.CurrentUser.IsAdmin
  • Remove the tick/checkmark on the Visible Expression box.
  • Click on the ProperCarView ViewModel and look for Readonly Expression.
  • Paste the expression.
  • Save and check the changes in your app.

Next Chapter:


This page was edited 29 days ago on 06/17/2024. What links here