Auth0 Angular 10
Apex Designer Documentation
What's New
Getting Started
Projects
Business Objects
Processes
User Interfaces
App Behaviors
Files
Dependencies
Project Settings
Libraries
Patterns and Best Practices
App Showcase
Angular 10 Base Library
Frequently Asked Questions

Manage Supplier Defaults

Set defaults using the business object definition and a behavior. Also use icon buttons in place of a field.

Blank Profile Image
Written by Keith Miller
Updated 2 years ago
4 min read

This lesson introduces setting Business Object defaults using the static assignment and behaviors. Behaviors are server-side logic that extend the basic create, read, update, delete behavior of a business object. It also shows you how to control which properties are shown in different contexts and how to use icon buttons to change values.

Set Default Values

Setting a Static Default

When we create a supplier, we want the status value to default to "Proposed". We can set that static default in the Business Object Definition.

  1. Open the Supplier business object and click the status property. Add the default value of 'Proposed' in the Default field.  Since we are setting the status automatically, there is no point in prompting the user for that when adding a supplier. To eliminate this, we can check the "Is Hidden" checkbox:
    Status Business Object property
  2. Generate the business object and try it out. You will see that the Status field is not shown on the add dialog:
    Try adding a supplier
  3. Since we have hidden the status field on the Add Supplier page, we should show the status on the Supplier table. To do this, open the Suppliers page and add "status" to the pathsCsv attribute of the table:
    Show the status on the table
  4. Generate the page and try it out. Status is now the third column on the table.

Setting a Dynamic Default Value

We also want the code field to default to the next sequential number from all of the Suppliers we have entered. We will use a Business Object Behavior to achieve this server side.

  1. Open the Supplier Business Object and enter "set code value" in the "Add a behavior..." field:
    Build the set value behavior
    Press enter to add the behavior.
  2. The Business Object Behavior page is shown:
    Business Object behavior definition page
  3. On the top left, click the "Http Post" behavior type (which is the default) and change Type to "Event Handler" and leave the default Event as "Before Create":
    Define the behavior type
    The logic in this behavior will be called before each Supplier business object is created.
  4. Notice that "supplier" is the first parameter (input) for this behavior. In the Implementation pane, enter this line:
    let max = await Supplier.findOne({ order: 'code desc' }, options);
    debug('max %j', max);
    
    supplier.code = max.code + 1;
  5. Generate the business object behavior and try it out by creating a supplier without specifying the code. It will populate with the maximum code value + 1 from your suppliers.

Add an Activate Supplier Icon Button

If you open a supplier, you will notice that the Status field is no longer there. That is because we marked it hidden. Instead, we'll add an icon button with a "click" event to update the status.

  1. Open the Supplier page, expand the Breadcrumb element and enter "bu" in the "Add element inside Breadcrumb" field:
    Add a button to activate the supplier
    Press enter to select the "Button (HTML)" component.
  2. The button is added with a default attribute "click" that "triggers" an action. Enter "supplier.status = 'Active' in the value:
    Define the action for the button click event
  3. In the "Add attribute..." field, enter "icon":
    Add the mat-icon-button directive to the button
    "mat-icon-button" is an Angular Material "directive" that tells Angular to display the button as an icon button. Press enter to add the attribute.
  4. The Authoring Rules in the Angular Material library, automatically add an Icon element inside the button. Enter "play_arrow" in the innerText to set the icon:
    Set the icon image
    You can use any of the Material Icons that you like.
  5. Generate the page and try it out. Notice that the button is not quite in the right place:
    Run the updated page
    That is because we didn't set a width for the button so 1/2 the width went to the breadcrumb and 1/2 the width went to the button.
  6. Add an "apexWidth" attribute and set it to "40px":
    Add an apexWidth to the button to help position it correctly
    Generate the page and see the result.
  7. Finally, users like to know what an icon button does before they click it. Add a "matTooltip" attribute with a value of "Activate Supplier":
    Add a tooltip to the button do display help when the cursor is over it
    Generate the page and try it out. Clicking the button will set any supplier to status Active. You can see the result in the Suppliers page.

Add an Inactivate Supplier Button

That was cool, but we don't have any visual feedback that a supplier is active and don't have a way to make a supplier inactive.

  1. Copy the button by clicking the copy icon button in the blue header:
    Copy the activate button to make an inactivate button
  2. Click the paste icon button to the right of the "Add element after Button" field:
    Paste the button onto the page
  3. Change the click action to "supplier.status = 'Inactive', the tooltip to "Inactivate Supplier" and the Icon to "stop". Generate the page and try it out.

Make the Buttons Conditional

While both buttons work, it seems strange to have them both on the page at the same time. Ideally, only the applicable button should be shown.

  1. Add an "if" attribute to the activate button with the expression "supplier.status != 'Active'":
    Add an 'if' attribute to make your buttons conditional
  2. Add an "if" attribute to the inactivate button with the expression "supplier.status == 'Active'".
  3. Generate the app and try it out.

Summary

You added your first default and Business Object Behavior to set the default status and code for new suppliers. You set the status field to be hidden by default and then added that as a column in the table on the Suppliers page. Finally, you added Icon Buttons that set the supplier status to "Active" or "Inactive" and controlled which button was showing with a conditional expression. Click the Next Topic link below to continue.

 

 

 

Powered by Apex Designer
Terms of ServicePrivacy Policy
© 2017-2024 Apex Process Consultants