Top
Top
LibraryEASYProcess Training GuideChapter 7: Combining Concepts
Creating WebPart B
Add WebPart Filters
Add Value Transformations
Processing List Information

Creating WebPart B

Create WebPart and Datasource

Create a WebPart just as before.

  • Name : “Training: WebPart B”
  • Description: “Training: WebPart B”

You will now have your blank new WebPart B. This chapter will example ways to combine concepts we have learned so far. In the past we used a RunQuery service in the Process Datasource to query the database, so this time we will use an Inquire. This is just a different way of doing this so you get the most experience.

  • Add a Process Datasource to your WebPart.
  • Open the Process Datasource to reveal the Process Canvas.
  • In the Services list, find the “Database Services” Workshop and expand it.
  • Find the “Inquire” service and expand the options below it.
  • Click and Drag the JDEData option onto the Process Canvas.
  • Connect the Start Service to your newly created Inquire.

Your process canvas should now look like this

Query Builder

Now, we're going to join two tables in the query builder. Double click the “Inquire” to open the Service Canvas. Right-click “FileName”, and select “Query Builder”. You will notice that in an Inquire, you cannot feed an existing query into the Query Builder. This is because the Inquire’s query structure is far less complex and would not contain subqueries or unions in the same level of complexity that an RunQuery could.

  • Add tables F0101 and F0116 to the Main window: fist, get both tables into the Main window by double clicking them one at a time from the list of tables. You could also click and drag the table name onto the Main window.
  • Once both are in the window, you can join the tables by dragging the ABAN8 column from F0101 window onto the ALAN8 column in the F0116 window.
  • Notice it automatically generated the query joining on the Keys ABAN8 and ALAN8 in the bottom left.
  • Click “Use This Query” to pass this query into the Inquire service in the Datasource.

Since the text will end up in the Inquire, the Query used will not begin with “SELECT * FROM”. This is because Inquires have a place for the developer to define the columns in the select clause, where clause, and order by clause without having to type it in. EASYProcess maintains the structure of the query, so all that is required for the FileName parameter is the table name. Below is the text that ends up in the FileName parameter after it is fed back from the Query Builder tool.

<xsl:value-of select="$EP_Profile_Database_JDEData_DbName"/>.F0101 INNER JOIN <xsl:value-of select="$EP_Profile_Database_JDEData_DbName"/>.F0116 ON  <xsl:value-of select="$EP_Profile_Database_JDEData_DbName"/>.F0101.ABAN8=<xsl:value-of select="$EP_Profile_Database_JDEData_DbName"/>.F0116.ALAN8

Add an Order By Clause

We're going to order the results from this query by the ALEFTB column.

  • Click the “OrderBy” property of the Inquire
  • The Recommended values on the right panel will auto-fill based on the selected tables. Expand “Recommended Values” and “Columns In Table”
  • The columns are arranged alphabetically. Scroll down to find “ALEFTB”
  • Drag this value into the Service Canvas value input area

Add Results

We are now going to add the results to the query. In the resulting SQL query generated from the Inquire service the Results create the select clause.

  • Right-click the “Results” parameter and select “Add New Results”
  • Click the in “Column” of the newly added Result. The Recommended values on the right panel will auto-fill based on the selected tables. Expand “Recommended Values” and “Columns In Table”
  • Just as before find the column you wish to add and drag it to the Service Canvas value input area. Add ABAN8 (Address Number).
  • Complete the same steps to add an additional result for each of the following fields:
  • ABALPH (Name)
  • ABMCU (Branch Plant)
  • ALADD1 (Address Line 1)
  • ALEFTB (Effective Date)

Save the Inquire and close it. Connect your Inquire to the Terminate service. Save the Datasource Process Canvas and you can close it and go to the next step.

Add a Query Filter

In the Inquire service, the Where clause of the SQL query is determined by the “Key” parameter. For now, we will not be adding a Where clause, so right-click the “Key” parameter and select “Add New Keys”. Match the key as shown.

This will create a where clause like so: WHERE 1=’1’

This will always be True, so it will be the same as not applying a filter, which we want to demonstrate.

Save and Build the Process Canvas and then return to the WebPart Canvas.

Add List section to Web Part

Go to the datasource tab (click refresh) and notice your newly added datasource should be there.

To add a list section, you can drag and drop the datasource either from the Datasource Tab on the left, or from the DataSource Section attached to the Web Part. Drag the datasource from either into the Web Part itself.

This should open the field selector. There is a textbox with a magnifying glass icon button to the right of it for selecting the “Data Source Node”. Click the magnifying glass and the Process Log Tree window will appear. This is a tree view of the Process Datasource. Select the “Inquire” node  and click “Ok”.

Select All fields and your screen should match below

If you wish, you can rename the fields, change their description, and/or change their field type. For this example, we're going to leave the field type as label.

Click “Add”. Your WebPart should match the image below.

Click on the List Section created. Creating the tool from the Data Source has automatically assigned the datasource to the list section by auto-filling the List Section properties “ListDataSource” and “DataSourceNode”. Look at the values that were auto-filled for these properties.

Next, assigned the following Description properties to the WebPart. Also rearrange the labels in order to match the list

  1. ABAN8 - Address Number
  2. ABALPH - Name
  3. ABMCU - Branch Plant
  4. ALEFTB - Effective Date
  5. ALADD1 - Address

Rename Your Datasource

Now that the Datasource is fully set up, it is good practice to name your datasource appropriately for yourself and future developers.

In some WebParts a good name might be “HideUnhide” if it were responsible for running the logic to determine if areas of the webpart should be hidden depending on the access level of the user viewing it.

For ours we will choose “F0101_F0116 DS”. Select the Datasource and on the right side of the screen the properties for this Process Datasource will display. You could choose to name yours differently. Notice how it also changes on the WebPart canvas.

 

Test List Section

The list section is a special type of section. If the datasource returns multiple rows of data, the fields specified in the list section will be repeated for each row.

Test Web Part B by going to the Test tab. It should look similar to the below image.

Note: if the WebPart is not displaying in the “Test” tab, build the webpart again and retry.

Data Source Logs

Notice that the number or records returned is very large. This displays all the records that exist in the JDE Address Book Master F0101.

Now that you have loaded the WebPart in the “Test” tab, logs have been generated. Click on the “Log” tab. If no records show, move the “App Level Log” slider to “Info” and reload the WebPart in the “Test” tab.

The log records created from the WebPart load are shown with a green “INFO” label to the right of them. This means that no errors occurred and the log is an Info level log. This means it will show the input and output XML of what ran.

There is a log for the page it ran on, the WebPart itself, and the Process that ran that is associated to the WebPart (Process Data Source). Click on the Process Data Source log record and the content of it will be populated in the panel on the right.

Notice that in the logs, although the query returns the NoOfRecords as a very large number, only 10 records were actually returned. This is because the list section has a default of 10 records to display on its first page. If this is set to a different value, like 3, then 3 records would display in the logs.

This is an optimization feature. Since only 10 records are going to display on the page, only 10 records are returned. However, since the count of how many records were found by the query displays at the bottom of the list section, the query returns that correct value in its NoOfRecords property.

If you wanted to turn off this feature, that is controlled by a property on the list section called “DisableAutoConnect”. If we set this to “True” all of the thousands of records will load in the logs, but still only 3 will display in the WebPart when it loads.

Add Style

We briefly learned about the Style Editor tool which is available in WebParts to create a style CSS string. This style is applied over the existing CSS File for the site. We will now use this tool to give the WebPart header a style. First, turn on the WebPart header. Click on the WebPart in the WebPart canvas, find the property “Show Header”, and set it to “True”. Make sure the WebPart has a Description; set it equal to the Name.

Now if you go into the “Test” tab, you will notice the WebPart has an overall header. The text for the header will be the description of your WebPart.

In the Style properties of your WebPart you will find a property to give the Header a style. Click into this to change the style and click the “...” to open the style tool.

Experiment with this tool to find a header style you like. Once you have found a style you like, click save and test it by loading the WebPart in the “Test” tab.


Add WebPart Filters

In our example, and often with list sections, we are going to give the user an ability to filter the list section on the page. If the list section displays lots of entries, the user will have a way to narrow their search to the desired result without having to click the next arrow many times to page through them. We will improve our WebPart B by adding an AddressNumber and Name filter.

  • Add a section at the top of the web part called "Filters"
  • Add two Textboxes to the section. Call one AddressNumber Filter, and the other NameFilter.
  • Set the AddressNumber description to “Address Number:” and the NameFilter description to “Name:”
  • Also add a button called "Search" with a Text property of "Search".
  • Set the button text to “Search”

Add Filters to the Datasource

Open the Process Datasource and open the Inquire service. Previously we put a dummy Key (WHERE 1=1) so the Inquire would not be filtered. This is because the Inquire service always needs a Key.

 

Now we are going to add the following Keys. Match the following image so that when you click on the Keys node in the service parameter tree, your inputs match. A description on how to fill out these input parameters easily using the Recommended Values is also below.

Column: Once you click into the “Column” parameter of the key, the “Recommended Values” will populate a list called “Columns in Table”.

Operator: Once you click into the “Operator” parameter of the key, the “Recommended Values” will populate a list called “Valid Operator Values”.

Type: Once you click into the “Type” parameter of the key, the “Recommended Values” will populate a list called “Valid Data Type”.

Value: For fields that exist on the page, these are available in the panel on the left, instead of the right of the Service Canvas screen. In the Input tab in the left panel, under “WebPartFields”, you will see the names of all the fields in the WebPart. This is why it is important to name your Fields to something meaningful. Using these variables pulls the value that exists in these fields from the page.

IgnoreBlanks/IgnoreCase/AndOr: Once you click into the “IgnoreBlanks” parameter of the key, the “Recommended Values” will populate a list called “Valid Values”.

 

The reason we need to keep the original 1=1 key is because we are setting IgnoreBlanks=’True’ on our other keys. So, when the page loads for the first time, the NameFilter and AddressNumberFilter will be blank. Our “IgnoreBlanks” property will see that our reference to those fields is blank and as a result, remove them from the Where clause. So in this case we will again be without a where clause in the Inquire service unless we keep the 1=1 key.

 

We also want to set the NameFilter key with an IgnoreCase=’True’ because we don’t want to limit the users to typing the matching case as it is stored in the database. If the user types “company” and it is stored as “Company”, it should still come up in the results.

 

Here is the query that runs from the logs to show that the other two keys are removed on the first load when the filter fields are blank.

Here is the query that runs when filtering by the Name. Notice that since the AddressNumberFilter is not used, it is not included in the query. Also, the SQL function “UPPER” has been applied to the column “ABALPH” and the text entered in the WebPart has also been converted to all uppercase by EASYProcess. This is because IgnoreCase is set to True. Lastly, the text entered in the WebPart is encased in SQL wildcard characters. This is because the operator used was a “Like”.

If a RunQuery service were used instead of an Inquire, the developer would have to include this SQL logic in the query written out instead of depending on EASYProcess to apply it. This is one of the benefits of using an Inquire.

Configure the Button Process

So far the button field does not do anything when pressed. We need to create the button process. Within this process we can define what actions should occur when the button is pressed.

 

  • Double click the “Search” button greyed out gear icon on the WebPart Canvas. This will create the button process.
  • In the “Services” list, find the “HTML Services” Workshop and expand it.
  • Find the “RunDataSource” service and drag it onto the Process Canvas.
  •  Connect the service to both the Start and Terminate service so that it now looks like the image below.

  • Open the RunDataSource. In the Service Canvas screen, right click “DataSources” and select “Add New DataSources”.
  • “DataSourceId #0” will now be created. In order to find the DataSourceId of our Process DataSource, go back to the WebPart Canvas tab and select the DataSource. In the right panel, under “Basic Properties” you will find the “DataSourceId”. Copy it and paste it in the service canvas value input area.

  • Your RunDataSource service should now be configured like below

Now when you click the “Submit” button, the specified DataSource will run and all the associated fields (your list section) will be reloaded.

Test Your Filter and View the Logs

If you test your WebPart, you can test the filters by entering relevant data and clicking your search button as shown below.

As you test things, the WebPart/Processes are loaded and generate logs. Be sure you are using the logs to keep an eye on how they are loading and monitoring your logic. Remember, you get to the logs in a WebPart or Process by clicking the “Logs” tab next to the “Test” tab. If the WebPart/Process you have open has run recently, it will have records you can click on to view the associated XML.

Adding an Additional Datasource Filter

If you notice, our effective dates have a range of dates and it is possible to display a date that is effective in the future. Let's say we don't want to see any addresses in our list section that has an effective date that's in the future.

You can accomplish this by adding another “Key” to the Inquire service we used.

  • Open the Datasource
  • Find the “Date and Time Services” Workshop and expand it. Drag the “GetCurrentDateTime” service onto the process canvas.
  • Change the process flow so that it follows this order: Start, GetCurrentDateTime, Inquire, Terminate.
  • Save the Process Canvas.
  • Open the Inquire service and add a new Key.
  • Using the “Recommended Values” panel on the right, configure the key as follows. Notice that each time you click into a node under key, the values available to you in the “Recommended Values” area change to be relevant.

AndOr: AND

Column: ALEFTB

Operator: <=

Type: Int

Value: <xsl:value-of select="WorkData/GetCurrentDateTime/JDEDate"/>

You may have to right click in the right panel and click “Refresh” for the “GetCurrentDateTime” service to become available. We can use a xslt value of variable to reference the services that run before the current one. Because we are setting it up with a dynamic value to represent today, the date it uses for its “today” filter will always be accurate.

Once you're done, you can close the datasource canvas and test the web part. It should always exclude the dates after today's date.


Add Value Transformations

Sometimes, the data coming from your datasource will need to be transformed in some way. This could be to append a dollar sign before a currency value and add the appropriate commas and decimal. Another common value transformation is converting the date from JDE Date into a more readable format. JDEDate is a julian code which is used by the JDE system to represent the date as an integer. This makes filtering on dates in a database fast and comparing dates or performing date logic easier.

There are a few ways to perform value transformations. We will examine two of them.

WebPart Field Property Value Transformation

To add a value transformation, go to the “Text” property of the ALEFTB (effective date) field.

Then, go to the Value Transformations tab. It should look as below.

Change the rule to "ConvertFromJDEDate" and click add.

Note: You can have multiple transformations applied to 1 element. Just keep adding them to the list. They get applied in order. For this example we will just apply one transformation.

Test Transformation

After testing your web part, it should be in a more readable format as below. This is to confirm the transformation has worked.

Take a look in the datasource logs and notice that the date is still returned in JDEDate. This is because the data is still in JDEDate until it is placed on the webpart canvas in the field where the transformation is defined.

Delete/Editing Field Property Value Transformations

To demonstrate the second way to perform a value transformation, we will need to undo the first. This will also give you experience removing value transformations.

  • Click on the “ALEFTB” field and go back into the “Text/Data Field Property Editor”
  • Click into the “Value Transformations” tab.
  • In the list of value transformations, select the one you wish to delete and click the “Delete” button. Notice the other tools here. If you wanted to just edit it or move it up or down in the order of value transformations that run, you could also accomplish this here.
  • When you are done making your changes, click the “Save” button at the bottom.

Process Service Value Transformation

First test your WebPart to confirm the value transformation is no longer occurring. You will have unexpected results if you have two value transformations applied.

The second way to apply value transformations which we will be covering is at the process service level.  Open the datasource and open the Inquire within that. Notice at the right side of the service canvas, there are two tabs: Service and Value Transformation.

Here is the screen for the service level value transformation.

Service Output: The service’s output is listed on the left. Selecting one will do two things: filter the “Existing Value Transformations” list and autofill the “New Output” textbox in the “Add New Value Transformations” section.

Add New Value Transformations: After either typing in an output or selecting one from the Service Output panel, the “New Output” text box will be filled with an output. Click “Add New Output” and it will be added to the drop down list next to “Select Output”.

With an output selected in the drop down list next to “Select Output”, you can select a rule to perform on that output and click the “Add” button above the list section of Existing Value Transformations.

Existing Value Transformations: All the active value transformations for the service will be listed here. This list could be filtered to only show the value transformations for a particular output by selecting an output from the Service Output panel. To unfilter this list, click the “Show All” button and all existing value transformations will be shown. From here entries can be deleted or moved up or down to edit the order in which the value transformations will run.

Creating Value Transformation

We will be adding a “ConvertFromJDEDate” value transformation for the “ALEFTB” output. Follow the below steps to accomplish this.

Here is a diagram that illustrates the steps of creating a value transformation.

  1. Select the Output you want to perform the value transformation on. This will auto-populate the “New Output” text box.
  2. Click “Add New Output”. This will select the output in the “Select Output” drop down.
  3. Select a rule. This is the transformation that will be performed.
  4. Click the “Add” button and the new entry will be added to the list section below.

Service Logs

Now that the value transformation is set up for the service, the transformation occurs here. In the logs you will now see the result returned in your selected format and is no longer in JDEDate.

If we still had the WebPart field level transformation in place, it would take “6/30/2012” and perform the “ConvertFromJDE” function on it, which would yield unexpected results because the input is not valid for that function. This is why it is important to coordinate value transformations between the service and webpart field level.

Test Your Transformation Again

Confirm your service level transformation has also worked and the webpart is still functioning as expected.


Processing List Information

Often times, when you create a WebPart that takes in user entered data, you will need to use information on the page in a process. Processing information from a list section can be tricky because if you want a specific row, you would have to specify which one and if you want all of them, it can be difficult to manage many rows of data.

In our example, we are going to allow the user to select rows of the list section and then send an email to the user for each row selected.

Designing the Feature

When making a change in EASYProcess, it is important to break down the feature into separate requirements. Until this point, you have been following the training steps without knowing what the end result is. Here you are going to think about the feature as if you were taking requirements and planning the change yourself.

We want the user to be able to load our WebPart, choose some rows (some or all), enter their email addres, and have an email per row sent out. This will require:

  1. Change our List Section so the user can select specific rows
  1. Allow the user to select multiple rows
  2. Allow the user to select all rows
  1. Create a textbox where the user can type in their email address
  2. Create a button
  1. The button should pull information from the list section on the page
  2. Should be able to distinguish a checked row versus an unchecked row
  3. Pull the user’s email from the page
  4. Send an email out to the user for each row that is checked

Row Selection Mode and Select All

The List Section that we created actually has a Row Selection property.

Change the “Row Selection” property to "Multiple" and the “Show Select All” property to "True" as shown below.

Row Selection

  • None: no checkboxes will display
  • One: Checkboxes will display next to each row and only one can be checked
  • Multiple: Checkboxes will display next to each row and multiple can be checked

Show Select All

  • True: A checkbox will appear that when selected, it checks all the checkboxes of the list section. This will be a “Select All” feature so the user doesn’t have to individually check each line.
  • False: No “Select All” feature will be present.

Create Button and Attach a Process

Create a new section under the list section and put a button in it. Fill out the below button properties and rename your newly created section to be meaningful.

Section Description: Email Actions

Button Name: EmailSelected

Button Text: Email Selected

You can attach a process to this button by double clicking the gear on the right side of your button.

Our button process is going to retrieve the information from the list section and then process that information to perform an action. This requires us to pull the information from the list section for use in the button process.

Once you’re in the newly created button process, find the “GetFieldValues” under the “HTML Services” Workshop in the Services list. Drag it onto the Process Canvas and connect it like shown.

This service is used to pull values from fields on the page. Click into the “GetFieldValues” service to configure it.

  • SectionId - Enter the section id of the list section. You can find this in the WebPart canvas by clicking on the list section and looking in the right panel in the SectionId property.
  • RowIndex - Leave this blank for now. We want all the rows of the list section, so we shouldn’t specify a row index here.
  • SelectedRowsOnly - Drag “True” from the right under “Valid Values”. Since the List Section’s Row Selection is turned on, this will only return to us, the selected rows.
  • Fields - Right click and add a field. Drag from the left panel “ABAN8” into the “FieldName” property. Again, leave the RowIndex blank.

GetFieldValues doesn’t really require that we specify Fields as long as we provide the SectionId. If you give a SectionId, it will return all the fields in that section. However, if you want to filter the fields returned, you can specify fields and it will return only those. We are going to practice filling in each field we want returned as practice.

In our example, we are using GetFieldValues with a List Section, but it can be used with a regular Section too. The fields again do not need to be specified, but can be to filter the number of fields returning.

EASYEdit Tool

You could create each field by right-clicking to create a field and draggin the field from the page on the left, or you could use the EASYEdit Tool and type the values in if you find it faster. Right-click the “Fields” node and click “EASYEdit Fields”.

The EASYEditor is a useful tool if you just want to type out all the values you want. In order to create all the columns for the labels in the list section, match screenshot below. After reading the instructions in the EASYEditor you may notice that this tool would not be helpful if the data you wanted to put in the properties contained commas or new line characters. This is important to remember, but for our use, that won’t be a problem.

When you are done, your service should match the screenshot below. Also remember that your SectionId is going to be different.

So far all our button will do is return the rows from the page which are selected, but let’s test that functionality. Return to the WebPart Canvas and navigate to the “Test” tab. Select some rows, click the button, and look at the logs.

You’ll notice some columns were returned that you didn’t specify. “EP_RowSelect” is one of them. This column returns either “True” or “False” and it maps to the checkbox for the Row Selection of the List Section. This will be how we can tell if a row is selected and an email should be sent. This would be returned even if we didn’t specify to only return selected rows. So alternatively, we could have requested every row to be returned and then only taken action on the ones that have EP_RowSelect = “True”.

Now we know the GetFieldValues service is working. Before continuing, remember to rename the GetFieldValues service. Since services are referenced by their name, if we wanted to change the name later on, we would need to rename all the references in other services. Rename the service “ListofAddresses”

Create a For Each Loop

Next, we want to send out an email for each selected row. We can do this with a For Each Loop. This can be created a few ways. The first is by finding the services in the services list and dragging them onto the Process Canvas. The services we will need are “For Each” and “End For Each” which can be found in the “Process Flow Elements”.

The other way to create the For Each loop, is to right-click the service we want to For Each Loop on and select “Create ForEach Loop”. This is sometimes more useful because it will auto-name the services and configure the service for you.

After creating your For Each services, the Process Canvas will resemble the screenshot below.

You’ll notice that whether created by either method, the name of the beginning service matches the name of the end service. These services must be used in pairs and EASYProcess knows which ones are the corresponding pair based on the naming scheme.

Pattern

ForEach[Value]

EndForEach[Value]

Example

ForEachListofAddresses

EndForEachListofAddresses

How does the For Each service work?

For-Each Loops

For Each loops will automatically index the path specified in the SelectorValue input of the ForEach loop.

Consider the output from our ListofAddresses service. Each record has a path of WorkData/ListofAddresses/ABAN8.

Lets define WorkData/ListofAddresses as the selector value for the For-Each loop. (Which is already done for you if you created the For Each service by right-clicking the service.)

Now if we try to access WorkData/ListofAddresses/ABAN8 (or anything that has that selector path) in any services between the start and end of the for each loop, it will automatically index the path based on the current index counter of the loop.

So on the first iteration, WorkData/ListofAddresses/ABAN8 will become WorkData/ListofAddresses[1]/ABAN8 which will access the first node of the selector path.

On the second iteration,  WorkData/ListofAddresses/ABAN8 will become WorkData/ListofAddresses[2]/ABAN8 and so on…

Send an Email Based on the Data Retrieved From the WebPart

Now, add a SendEmail service between the ForEach and EndForEach. We're going to send 1 email for each row returned from the page with information about that person.

Change the properties of the SendEmail service as below.

  • To
  • For now, hard code this to yourself so you can verify this is being sent out.
  • Email Subject
  • Drag and drop the output of the list service So it reads as below
  • “Address Information for [Name]”
  • Email Body
  • Do the same thing as the subject, but Make it read:
  • “[Name] ( [AddressNumber] ) from Branch [Branch] has an address of [Address] and it has been effective since [Effective Date]”

You can test the WebPart at this point to make sure the SendEmail service is configured, but remember, right now it sends out an email for every row, regardless of the user’s selection.

Understanding Binary Decisions

So far all of our Processes have had only one process flow, meaning the same thing happens each time it runs. We are going to make this process a little different by adding a Binary Decision. This is a service that asks a question and depending on the answer, directs the process to one way or the other.

The Binary Decision service is configured by defining one or multiple tests. A test is a comparison of two value. You give it one value and compare it to an expected result. For example, if we want our Binary Decision to ask “Is this row checked?” our test would compare the WorkData/ListofAddresses/[SectionId]_Select = “True”.

The Binary decision performs the test and outputs either “True” or “False”. This directs the process flow either to the right or down depending on the result of the test.

Each test is composed of a Left Clause, a Right Clause, and the Operator. Typically this is how that string is broken down into the Binary Decision inputs:

The above example is a Binary Decision with one test. If the Left Clause is equal to the Right Clause, the Binary Decision returns “True”.

Each Binary Decision can contain one or many tests. Each test is separated by an AND/OR operator, which determines the order in which the tests are run. ANDs are always evaluated before ORs. The following diagram explains how multiple tests are handled.

Add Logic to Only Email If Row is Selected

Previously, when we set up the GetFieldValues service, we specified to return only the selected rows. So we could count on that service returning only the records we want to send emails for, and only having the SendEmail service inside the For Each loop. However, for this example, set the “SelectedRowsOnly” property of the “GetFieldValues” service to “False” so we can iterate through all rows on the page in the list section, and only send out an email for some of them.

Use the Binary Decision service to match your Process Canvas to the image below.

Configure your Binary Decision like so. When this test is “True”, the answer to the question “Is this row checked?” will be “Yes” and the email will be sent out.

Test the Email

Now test the web part and click the Email button. It should send 1 email for each row seen on the page (It doesn't send it for the hidden rows).

You should have gotten one email for each selected row of the list section. If you click the “Select All” box, you should receive 10 emails.

Deselect the Rows

You may have noticed, after you sent out the emails, nothing changed on the page; the rows were still selected. This is because we didn’t tell the page to refresh or the rows to uncheck. Refreshing the page would be an easy fix, but let’s say the user had paged through the list section and we wanted to preserve that, which would be lost on a page refresh. Instead, we really just want the rows to be deselected now.

To fix this, at the end of your for each loop, add a service “SetRowSelection” from “HTML Services”. Configure your service like below.

  • SectionId - Set this to the List Section Id
  • SelectAll - Set this to “False”
  • Rows - Although you could add rows to target specific rows by their index, leave this blank. This will target all rows, which is what we want.

Test again and notice that after the button is clicked and the emails are sent, the rows will be deselected.

Button Click Animation

Since the processing in your email button could take a while, we want to try to give the user a notice that the button is processing the information. We also want to stop the user from clicking the button multiple times.

You can achieve this through properties of the button itself.

Under the “OnSubmitProgress” section of the button properties, there are three properties:

  • Display Progress Animation - Options are True/False. When True, False, there is no additional animation when the button is pressed.
  • Progress Animation Image - If nothing is entered here, but DisplayProgressAnimation is turned on, the default image will show. This is the spinning wheel.
  • Progress Animation Text - Text can display beneath the image to inform the user of how long it should take or what is happening. If left blank, no text will display.

Let's change the “Display Progress Animation” property to "True" and the “Progress Animation Text” to "Sending Emails..."

Now if you test your email button, you should get an animation similar to below.

Using the User’s Email

We now know the SendEmail service works. Now we can add the feature where the user can enter their email in  a textbox and use that entered email in the process.

In the same section you created your button in, add a textbox. Configure your text box with a name so it is meaningful to you and a description so the user knows what should be entered in the text box on the page.

TextBox Description: Email Address

TextBox Name: EmailAddress

We also want to add a feature where the user can just enter their email address and hit the enter key to press the button. To do this, we need to tell the textbox which button to press when the user does this. This is controlled in a property of the TextBox called “DefaultButton”. Set the DefaultButton property to the name of the button as you see it on the WebPart canvas.

We are now going to edit the button process. We need to pull the user-entered email address from the page for use in our process. We have already done this with our list section, but now that we are beginning to add more fields from the page, it may be a good idea to create a new reference at the beginning of the process to store all the variables used from the page.

It is good to get in the habit of doing this so that when you develop features that pull many values from the page, in the future if a label or a textbox’s name changes, you will only have to change the reference in one place instead of many.

Drag an “Evaluate” service out from under the “String/Math Operations” and name it “Prevalues”. Configure this Evaluate to have one Eval with a Name of EmailAdddress and an Expression with the variable pointing to the field on the page.

Now, change your SendEmail service’s “To” parameter to use this reference.

Test your send email service again by this time typing in your email address before selecting the rows and clicking the button. Test clicking into the textbox and hitting the Enter key to press the button.

Export to Excel

The List Section has a property called "Data Download" under the List Mode properties.

Change the value of this property to "CSV" and it should show a little export to excel button above your list as shown below.

The fields in the list section all have a property called “DownloadMode” This determines whether that field will display on the WebPart as well as be visible in the downloaded CSV. All of our Labels should have “Display and Download” selected so that each field that is displaying on the WebPart will also be available in the downloaded CSV. Change all the fields to have this value.

Now, go to the “Test” tab of the WebPart. Notice the new icon in the top left of the list section. If you click this, it should download the current list into a CSV file.

Open the CSV and confirm all the columns are present. Experiment by changing some of the labels to Display Only or Download Only and download the CSV again to see how it changes based on the selection.

Error Handling

We will discuss error handling in depth at the end of the training, but for now, we want to catch two error cases that we know users will encounter: not typing in an email address, not selecting any rows, and accidentally selecting the wrong rows. These are some user error cases that we can catch with some modification to our button process.

No Email Address Entered

Since we are using an “Evaluate” service named “Prevalues”, any time we want to reference a value from the page, we should reference it in the Prevalues Evaluate. Create a binary decision that asks “Is the email textbox blank?”.

Remember you can right click a Binary Decision to swap the “Yes” and “No”. If the email is blank, direct it to a service “SetTerminateActions” from “HTML Services”. In this service you can specify a message to show to the user.

This service is used for actions that will be executed when the process finishes. We are using it here to show a message to the user, but it could be used to redirect the user to a new page or refresh the current window. This service may come in handy later with other error handling and future projects.

No Rows Selected

If the email was not blank, we want to continue on to our next case; the user did not select any rows. For this, let’s change the “SelectedRowsOnly” property of “GetFieldValues” to True again. We only want the selected rows to return so it’ll be easier to check if any were selected. Drag another Binary Decision onto the process canvas and configure it like below.

If none are selected, this node will not exist. This binary decision is performing an existence check. EASYProcess makes this easy with the “*EXISTS” option in the right clause. If you run it while in the service canvas, you’ll notice in the logs that the actual test looks a little different. Here it is below.

In order to perform the actual existence check, all it really needs to do is set the test equal to the node. If “True” returns, this node exists. If “False” returns, it does not.

After your Binary Decision, add another SetTerminateActions service to show the user a message when no rows are selected.

User Selected the Wrong Rows

Our last error case is the user selected the wrong rows. There isn’t much we can do about this one, but we can ask the user if the selection is correct. Add a “UserDialog” service from “HTML Services”. Match your service to the screenshot below.

This service can be used to display a message to the user and provide buttons with options. In our example, we are asking the user if they really want to send out a certain number of emails. We added an XSLT variable with a “count” function in it to make that number of emails dynamic. We also created two buttons: Yes and No. In our example, the label on the button matches the value which is associated to it. When the user clicks a button, this service will have a chosen response which will be the response associated with the button which was clicked. For this reason, this service is always used in combination with a Binary Decision. Add a Binary Decision below this service that checks which option the user chose. You can be more creative with your button labels if you want, but keep the responses simple since those are the values we will be testing for.

If the user was not sure, we can end the process. There is no need for further action, we can just stop the process which will preserve the state of the page and let the user re-evaluate the selections.

Error Handling Overview

Here is all the error handling once it is complete. You’ll notice this added a lot to our process. Often times, the feature you are developing will be rather small, but the error handling for it will allow you to think about all possible cases, not just the successful case. This is an important step to development and the added effort will improve the user experience.


Powered by EASYProcess (© 2019 K-Rise Systems, Inc).