Adding rows to a list

In this Lesson

You will

  • Learn about styled grid elements and how they provide support for adding rows to the list of information they contain
  • Bind a single-row agent to a scene
  • Learn about agent mode execution
  • Learn about modal layers
  • Learn how to create a code list from values contained in a .csv (comma separated value) file
  • Add another validation to the Party datasource.

Concepts

If you have ever used a spreadsheet you know what a grid of information looks like. A grid is a collection of information arranged in rows and columns. A styled grid provides the ability to stylize the layout of each row.

There are two types of styled grids.

  1. Vertical Styled Grid
    This grid arranges the rows vertically. You used a vertical styled grid to display the list of parties.
  2. Flow Styled Grid
    This grid arranges arranges the rows horizontally and then vertically. A good example of a flow styled grid is a calendar. The days flow horizontally until they fill the available horizontal space and then another row is added to the list and the days flow horizontally in the new row until they fill the available horizontal space.

There are three ways to add rows to a grid

  1. Open a new window that collects information for the new row.
    Soiree has built-in support for this.
  2. Display an area near the list that collects information for the new row.
    Soiree has built-in support for this.
  3. Provide one or more empty rows in the grid for collecting new row information.
    Soiree provides you the ability to create a custom agent that can do this.

The first two options are the most commonly used techniques for adding rows to a list. You will be using option 1 in this lesson.

Enhance the skin to support adding new parties

  1. Open the PartyDefinition scene
  2. Pin layer 1



  3. Create a new layer



  4. Give the new layer a name by double clicking on the layer thumbnail



  5. Design the new layer as shown here



  6. Right click the OK button and configure it to close the layer



  7. Configure the Cancel button to close the layer



  8. Select layer 1 and configure the vertical styled grid’s Add Button to open layer 2



  9. Save the scene
    Command + S [OS X] or Ctrl + S [windows]
  10. Test the scene
    Start the server, if necessary, and then start the solution.



Bind the agent to the add layer

  1. Switch to the Agent Binding perspective and bind the Party agent’s values to layer 2



    Call the Engineer!
    The agent does not provide everything the designer needs. Ask the engineering team to modify the agent.

Leave the scene editor open. We will be returning to the PartyDefinition scene in a moment.

Adding the Type code list to the Party Agent

Change hats to the engineering styled cap.

  1. Select the com.example.party.codelist package and then open the Code List wizard.



  2. Create an item controlled code list named PartyTypes



  3. Download this .csv file which contains a set of party type codes

    PartyTypeCodes.csv
  4. Drag the downloaded PartyTypeCodes.csv file onto the code value list
    Your code list should now look like this



  5. Save and close the code list
  6. Add the code list to the partyType node in the Party agent
    • Open the Party agent item
    • Add the PartyTypes code list to the agent’s partyType node



    • Build the Party agent
    • Close the Party agent item.
  7. Add a validation for the party type in the Party Datasource
    • Open the PartyValidationPack class
    • Copy and paste this method into the class
      /** Obtain the com.example.party.codelist.PartyTypes code list
       * @return A CodeListRes containing the PartyTypes
       * @throws BrokerException If the item list cannot be located
       */
      private CodeListRes getPartyTypes() throws BrokerException{
      	try{
      		return CodeListBroker.getCodeList("com.example.party.codelist.PartyTypes", getDBConnectionProvider().getUserInfo().getTenant());
      	}catch (BrokerException be){
      		logger.error("Unable to locate the party types code list", be );
      		throw be;
      	}
      }
      
      
    • Override the checkPartyType() method
    • Copy and paste this code into the checkPartyType() method after the call to the superclass
      if (!getPartyTypes().containsCode(partyType)){
      	setPartyTypeMessage(error("The party type is invalid"));
      }
      
      
    • The class should now contain these methods



    • Save and close the class

Finish the agent binding for party add

  1. Return to the scene editor that contains PartyDefinition
  2. Click on the Refresh button in the Layer’s Agents section
    Notice that the partyType node now sports a code list.



  3. Bind the partyType node to the scene element
  4. Bind the agent’s mode to the OK button



    Mode Execution
    You must tell the agent when you want it to execute its mode. We want the agent to perform its add operation when the OK button is pressed.
  5. Save the scene

Modal Layers

Sometimes when a layer is open you want the customer to deal with the layer before doing anything else. For example, when the add layer is open you may want to ensure they press OK or Cancel on that layer before they interact with anything else that may be present in the scene. You can accomplish this by using a modal layer.

A modal layer will cause everything else in the scene to be disabled. The modal layer will be the only thing the customer can interact with.

  1. Close the Soiree client
  2. Enable the Modal option for layer 2



  3. Save the scene

When the add layer is opened it will now cause the other layers in the scene to appear disabled as shown here



Test the Party Add Feature

  1. Run the solution
  2. Enter a new party as shown here



  3. After you press the OK button the list will contain the new party



Adding Multiple Rows

What if you want the customer to be able to enter multiple parties without having to reopen the add layer each time? You can do this by configuring the OK button to stop closing the add layer when the button is pressed.

  1. Right click the OK button to open its property sheet
  2. Remove the request to close layer 2 and then press OK



  3. Save and close the scene
    Now when they press the OK button the party will be created and the add layer will remain open to accept the next party.
  4. Retest the scene by adding multiple parties
  5. Attempt to add a new item by pressing OK before you enter any data.
    Notice the error markers that appear by some of the fields



  6. Why is the end time not showing any error? We will deal with that question in the next tutorial lesson.



See you in the next lesson!