031.1 Typescript Classes for the Third View (Material UI) - chempkovsky/CS82ANGULAR GitHub Wiki

• 01 Run JavaScripts Wizard
• 01 First page of the Wizard
• 01 Second page of the Wizard
• 01 Third page of the Wizard
  • 01 Set UI List properties
  • 01 Set UI Form properties
  • 01 Go to Fourth page
• 01 Fourth page of the Wizard
• 01 Batch Action dialog
• 01 After script finished
  • 01 Note

• 02 Run JavaScripts Wizard
• 02 First page of the Wizard
• 02 Second page of the Wizard
• 02 Third page of the Wizard
• 02 Fourth page of the Wizard
• 02 Batch Action dialog
• 02 After script finished

• 03 Batch Action dialog
• 03 After script finished

PhbkDivisionView-View is our second View.

• According to the agreement specified in the article 016 Naming the folders

Click to show the picture

• we have created two subfolders
  • src/app/components/phbk-division-view
  • src/app/services/phbk-division-view

Click to show the picture

• To generate interfaces
  • Run Visual Studio and Open PhonebookSolution solution
  • Right Click src/app/components/phbk-division-view of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog

Click to show the picture

• repeat the steps described in the article

• repeat the steps described in the article

• On the third page of the Wizard
  • select the View for which we need to get the name
    • in our case we have selected PhbkDivisionView-View

Click to show the picture

• After PhbkDivisionView-View selected
  • On the left panel click UI List properties-node
    • On the right panel you define the view of the tabled data
      • with Up/Down buttons you define the order of the columns to be shown
      • with Shown-checkboxes you define which columns will be available to the user
      • with New Line-checkboxes you define which columns will be shown by default

Click to show the picture

• After PhbkDivisionView-View selected
  • On the left panel click UI Form properties-node
    • On the right panel you define the view and functionality of the Add/Update/Delete/View Item forms
      • with Up/Down buttons you define the order of the controls to be shown
      • with Shown-checkboxes you define which properties will be available to the user
      • with New Line-checkboxes you define how to layout the controls on the form
      • with Input type xxx-combo-boxes you define which type of controls to use for each property of the current ModelView

Click to show the picture

• Note:
  • SearchDialog, Typeahead and Combo input types can only be applied when the property is used by master-detail relations or belongs to master View
  • We select
    • SearchDialog-type for EEnterprsName (It belongs to master View)
    • ReadOnly-type for EnterprsIdRef (It is used by master-detail relations)
  • Take a look at Foreign key chain-column
    • EEnterprsName and EnterprsIdRef have identical Foreign key chain which is equal to Enterprise
      • for each Foreign key chain only one property can be of InputType, which equals to SearchDialog(or Typeahead or Combo). Other properties with the same Foreign key chain must be of InputType =Hidden or ReadOnly.

• After UI Form properties and UI List properties are defined click Next-button and go to the Fourth page

Click to show the picture

• repeat the steps described in the article

• repeat the steps described in the article

• After script finished
  • close Batch Action-dialog
  • close JavaScripts Wizard-dialog
• New interfaces-subfolder has been added
  • three files have been added

Click to show the picture

• Only after script finished
  • UI Form properties and UI List properties settings becomes persistent. So you don't need to set them again the next script is executed.

• To generate interfaces
  • Run Visual Studio and Open PhonebookSolution solution
  • Right Click src/app/services/phbk-division-view of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog

Click to show the picture

• repeat the steps described in the article

• Repeat the actions of the 01 Second page of the Wizard

• repeat the actions of the 01 Third page of the Wizard
• Note: you do not need to set up UI Form properties and UI List properties again. After running any script, these settings become permanent and will be available the next time you run the wizard.

• repeat the actions of the 01 Fourth page of the Wizard

• repeat the steps described in the article

• After script finished
  • close Batch Action-dialog
  • close JavaScripts Wizard-dialog
  • two files have been added

Click to show the picture

• read the article about Sform

• To generate Sform

  • Run Visual Studio and Open PhonebookSolution solution
  • Right Click src/app/components/phbk-division-view of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog

• repeat the steps as they described at 01 Generating interfaces until Batch Action dialog

  • Note: you do not need to set up UI Form properties and UI List properties again.

• repeat the steps described in the article

• After script finished
  • close Batch Action-dialog
  • close JavaScripts Wizard-dialog
  • seven files have been added
    • sform-folder
    • sdlg-folder
    • phbk-division-view-s.module.ts-file, which declares Angular module

Click to show the picture

• Aform, Uform, Dform, Vform are the components, which implement Add, Update, Delete, View item action
• To generate Aform, Uform, Dform, Vform
  • Run Visual Studio and Open PhonebookSolution solution
  • Right Click src/app/components/phbk-division-view of the src-project (Angular project) and select JavaScripts Wizard menu item to open the Wizard dialog
• repeat the steps as they described at 01 Generating interfaces until Batch Action dialog
  • Note: you do not need to set up UI Form properties and UI List properties again.
• On the Batch Action-dialog of the Wizard
  • select 01500-Vform.json
    • click start-button
  • select 01502-Aform.json
    • click start-button
  • select 01504-Uform.json
    • click start-button
  • select 01506-Dform.json
    • click start-button
• As a result
• aform and adlg folders and phbk-division-view-a.module.ts have been created for AForm
• uform and udlg folders and phbk-division-view-u.module.ts have been created for UForm
• dform and ddlg folders and phbk-division-view-d.module.ts have been created for DForm
• vform and vdlg folders and phbk-division-view-v.module.ts have been created for VForm