Additional Learning Exercises

This page contains helpful video resources that you can use to learn more about Journey Creator.

Creating an address validator application:(~20 minutes of learning content)

• Address Validation App
  • Part 1: Logging in.

    Go to the DXP login page and enter your username and password. Also, go to the preview URL; this will be used to view the front-end of your DXP application once it has been deployed to the app engine.
    
    Video 1:

  • Part 2: Creating a project.

    A project is just a place to store all of your work. You could share a project with someone else but for today we are going to use our own. Click on the admin icon in the upper right corner, and the projects sub-tab. Click "New Project" to create one. Add a name, and upload an image, which will make it easier to find in the project carousel.
    
    Video 2:

  • Part 3: Creating an application.

    An application is similar in scope to a website. It encompasses all of the pages on a site, such as registration, login, profile, billing, and whatever else a page might contain. Applications have an icon that looks like a folder. Once you've found your project in the carousel, click on the 'Add Application' button in the bottom left of the navigation side menu.
    
    Video 3:

  • Part 4: Creating a business feature.

    A business feature is similar to a single page in a website. Registration might be a business feature. Viewing your shopping cart is a business feature. Choosing a shipping option is a business feature. Business features have an icon that is a square made of 9 smaller squares. For the address validation app, we'll be creating two business features: One is an abbreviation of Address Validation, in camel case: addrVal. The other is a placeholder, so you can name it anything. I'm going to name mine 'TheEnd'.
    
    Video 4:

  • Part 5: Adding a step.

    A step can be a single act on a webpage, such as entering a message and clicking 'submit'. In e-Commerce, entering your name and address is a step, while entering billing information could be the same step or a different step depending on how the developer sets up the page. To create a step, hover over the address validation business feature. Again: A business feature looks like a square made of nine smaller squares. Hover over the business feature until a 3-dot menu icon appears. Click on this icon to bring up the options to create, edit, or delete a step. Click the plus sign that comes up to create your step. Name this step 'Check Address', abbreviated as shown: checkAddr. Using the pulldown menu, assign it a 'Simple Form' template so a form will appear for the user when they're prompted to enter their address.
    
    Video 5:

  • Part 6: Adding Data to the Application.

    Now we created nothing but a shell of a webpage. It has nowhere for a user to enter anything or click on anything. Our user needs to be prompted if they want to enter anything. So we are going to build that framework next. We do this in the Data Editor tab, which is all the way up top in the UI, next to App Builder tab. Click on the Data Editor tab. Five options come up in the subtab, each of which we will cover througout this exercise. For now, select the ADM, or Application Data Model, tab. Now, click the + Object button to create a new object. We'll name this object "serviceAddress". When you've saved the object, we are going to assign some properties to it. Select the Service Address object and click the Plus Property button to add a new property. Name this property "addr1", for 'address line one'. By default this property is a string, so if it is not set to string please click string before you save. Now, repeat the process of highlighting the 'Service Address' object and creating new properties for the following: addr2, city, state, and zip. If you forget to click on the service address before assigning a property, the property won't be properly 'nested', and that is an easy fix: Just click and drag the property back into the service object.
    
    Video 6:

  • Part 7: Adding List Validation.

    There are different types of validation to make sure someone's not wasting our bandwidth. Today, we're going to use a 'list' pulldown so people don't put something useless under the 'State' in the address. We will demonstrate how to make a pull-down list which prevents the customer from entering something that is not on the list. If you click on the Service Address object to open it, and then choose the 'state' property, and click 'edit', you'll see three tabs: Property, Privacy, and Validation. Click on Validation to add a list. Here, you can add a minimum and maximum character length for a field, a regular expression, or 'regex', or a pre-defined list. However, when we need to create the list first, because no lists are available. Let's create a list by clicking on the tab up top next to ADM called 'ARD', for 'Application Reference Data'. You can abandon changes since we didn't make any. Once you're in the ARD tab you'll see the option to make a new list appear. Click 'New List'. Let's call this list 'USStates'. Now, add a few state abbreviations such as NJ, AZ, CA, and so on. After entering a state you can either hit enter to move to the next line or click the 'Add Value' button. Once you have all of the states you want, click 'Save' and let's return to the ADM tab. Once again, click the Service Address object. Then, click the States property. Click edit, and move over to the validation tab. Now, when you switch on the 'List' validation, you'll see the U-S States list we created. Select it and click save. You have now created a pulldown for the customer where they can only choose one of the states that is on your list. Now that the service address object is done, let's create another object: We'll call it "geoCode". This is the portion of the application which will display the latitude and longitude coordinated of a given address, if that address is valid. Once you've created the geoCode object, highlight it and add a property. The first property will be latitude. This time, click the icon representing 'number' because latitude and longitude will be returned as numbers. Once you've saved latitude, create a number-type property called 'longitude' as well.
    
    Video 7:

  • Part 8: Adding the Data to the Step.

    Now, we have to tell the website what data to display. On the left navigation menu, click the 'checkAddr' step. If you can not see the checkAddr step, click on the addrVal application, then the addrVal business feature, then the check address step we created earlier will display. Once you've highlighted check address, click 'edit' on the far right. Three sub-tabs appear: Data Profile, Integrations and Rules, and UX Config. In the Data Profile tab, under ADM Library, you'll see an icon for each of the objects you created earlier. Click and drag the service address icon over to the data profile under the checkAddr step. Next, click on the Integrations and Rules tab. There are three options below; all that you need to do is click the button marked 'create' and then save your work. With that, we are free to preview our webpage. On the three tabs in the upper right, click 'preview'. Both of your business features pop up. In the preview pane, click the addrVal business feature, and then the checkAddr step. The application won't validate an address yet, because we haven't programmed in an integration yet, but you can check that your fields are displaying and that your pull-down list of USStates is working correctly."
    
    Video 8:

  • Part 9: Making an Application Flow.

    An application needs to know what to do first and what to do second and so on. Even though ours only has one step, we have to connect these and tell the application what to do first. In the left-side navigation menu, click on the addrVal app. Click 'edit'. Now, drag the addrVal business feature from the right to the left. Then, drag your second busienss feature from right to left. You'll notice two errors at the bottom of your screen: One states that we have unconnected features, and one states that we don't have a start feature. Let's fix the first error by clicking on the small square on the addrVal pill icon and dragging to the second business feature to connect them. Next, let's define a start feature by clicking on the addrVal business feature pill icon to bring up the 3-dot menu icon. Click on the menu icon, then select the 'Make Start' icon that pops up. Click save when you are done.
    
    Video 9:

  • Part 10: Adding a Translation.

    If we preview right now, the form has a few places to enter data. None of the prompts make much sense and if a user saw this website they'd probably assume it's broken, because instead of saying something like 'Enter Your Address' it says 'hb.serviceaddress.addr1'. So we need to tell it how to translate into language that the user can understand. Let's go back to the Data Editor tab, then click on the Translations sub-tab. You'll notice that no translations are currently programmed in, so let's create one. Click the plus add new button to add a new translation. In the editing pane, start typing English, then space, then hyphen, then space, then start typing 'United Kingdom'. Hit save once you have English, United Kingdom, selected. Then, click on the translation in the translations menu. Click Edit again and we can enter some customer-facing translations for our form. You'll notice that the properties and objects we created are on the left, and their corresponding translation fields are on the right. So on the line that matches up with addr1, let's type 'Address Line 1'. Then the next line is 'Address Line 2', followed by 'City', 'State', and 'Zip Code'. To save some time, let's also enter 'Latitude' and 'Longitude' in their corresponding fields below. When you are done, hit save. Going back to the App Builder, click on 'Preview' to see your app, but before you click on anything else, choose the gear icon to enter the settings menu. We have to assign this translation so once you're in the settings menu click on 'Simulate UI Client'. Under Locale, choose the English United Kingdom option you created earlier. Hit save, and when the option comes up to start the preview over, accept that option. This time, when you click through to the Check Address step, you'll see that the form is now populated with your translations, prompting the user to enter address line 1, address line 2, and so on.
    
    Video 10:

  • Part 11: Integrating with an API call.

    What we have created is something that prompts a user and asks them to enter an address. When they enter the address, nothing happens yet. We now need to integrate a service provider and perform an API call on that.
    Go to the Integrate tab. By default this brings up the "Service" sub-tab, and you'll notice that there are no service providers in the pull-down menu, so we'll have to create one.
    Click on the Service Providers sub-tab. Click "Add new". Call it Avalara. (Avalara is an address validation API belonging to Avatax, which is a tax calculation website). Now that it exists, we can go back to the Services tab and you can use the pull-down menu to select it. In the Services tab, with Avalara selected, click "+Add Service". You only need to change the following fields:

    • Name: addrVal
    • HTTP Protocol: HTTPS

    (Note: We're using HTTPS because Avalara requires a username, password, and API key. You might be able to get away with just HTTP if it only required an API key)
    In the HTTP Basic Auth pull-down, nothing is available, because we have to create it as part of our endpoint. Click save for now and we will come back later to complete this step.
    Once that is saved, we need to add an endpoint and invocation to our service, starting with the endpoint. Click on the Authentication subtab, and use the pull-down menu to select Avalara. Select the new option that pops up and click "Edit". Enter the following information in the grey box on the right:
    

    • Endpoint name: "avalaraTest"
    • Host: "rest.avatax.com"
    • Port: "443"
    • Operation URL: /api/v2/addresses/resolve

    
    Now click on the sub-tab marked "HTTP Basic Auth", which is next to the "Endpoints" sub-tab. In the Name, Username, and Password blocks, enter the following information in those respective fields:

    • AvalaraUser
    • 1100012580
    • 85FC3690319455CD

    
    The app needs an invocation in order to perform this API call. Click on the Services subtab, click on the addrVal bar, and click _+ Add Invocation. Set the name of this invocation to addrVal, and use the pulldown menu for the last field to choose the Endpoint of avalaraTest. Click save to continue.
    Finally, it is time to add the endpoint to our service. Click the addrVal bar, and click "edit". Name this "addrVal" if you haven't already, use the pull-down menu to choose HTTPS instead of HTTP, and for the last field change the HTTP Basic Auth tab to AvalaraUser. Click save to continue.
    
    Video 11:

  • Part 12: Mapping Data.

    Download the avalara-request.json and avalara-response.json files from here. Then, in the Services tab, click the bar that says "addrVal", then on the far right side click the down arrow to expan, and then on the left side a pill icon will appear that also says "addrVal". Click that, and the "Map Data" option with two crossed arrows will become clickable in the upper right. Click on Map Data. We will map a request first.
    

    • Click "[Add Mapping]"
    • In the pulldown that appears, click "Request".
    • Hit "Add".
    Now you have a request mapping.
    • Click the pen icon to edit the request
    On the left, you'll see the objects and properties you made previously.
    • Click "Load" under "Output" on the right
    • Click "Select File"
    • Choose "avalara-req.json"
    • Click "Import"

    Now it is time to map the request. On the left column, click the respective objects or properties and drag them to the corresponding field on the right:

    • Drag addr1 to line1 (Skip addr2 on the left)
    • Drag city to city
    • Drag state to region
    • Drag zip to postalCode (skip country on the right)
    • Click "Save".

    Next, it is time to map the response. When you click "Save" in a request or response mapping, you are returned to the services screen. If not, then click the Integrate tab up top followed by the Services sub-tab. Pull down the services menu to "addrVal". On the far right side of the bar is a down arrow; click this to expand the addrVal service so you can see a pill-shaped icon on the right, which is labeled "addrVal". Click on this pill-shaped icon then click the Map Data link in the upper right again.
    

    • Next to Response, click the + icon
    • On the left, click "Load"
    • Click "Select File"
    • Load the avalara-res.json file
    • Click "import"

    Because this app only requires a response of geographical coordinates, scroll down on the left until you see an object named "coordinates" with the properties "latitude" and "longitude" under it.
    WARNING: There is another set of latitude/longitude properties under the "validatedAddress" item which is in the validatedAddresses array. Keep scrolling down until you find the last set of properties called latitude and longitude, because the first "latitude" and "longitude" property will not map properly with our response.
    Click and drag to connect latitude on the left to latitude on the right, and longitude on the left to longitude on the right.
    
    
    Video 12:

  • Part 13: Final Build

    Building the final addrVal application: In the App Buildertab, on the left-hand heirarcical menu, click on the addrVal application. Then, click on the addrVal business feature. Hover over the addrVal business feature until the 3-dot menu appears. Add a step by clicking the + icon that appears. Name the step "geoCode", and assign it the SimpleForm template. Click save to continue. Now, click on the geoCode step and, on the far right side of the screen, click "edit". Under the Data Profile subtab, drag the geoCode subtab over from the right to the left. Next, on the Integrations and Rules subtab, click "Create". Finally, click the UX Config tab. Select any of the fields on the left, such as Title, and click edit. Enter the following information:

    • Title: "Address Validation Results"
    • Sub-title: "Geo coords"
    • Submit Label: "OK"

    Click "save" in the bottom right to continue. Next, on the left-side heirarchical menu, click the CheckAddr step, and then click "edit" on the far right. Select the Integrations and Rules sub-tab and perform the following steps:

    • Click "Create"
    • Click [+ Add Service]
    • Call it "addrVal"
    • Service Type*: API Call
    • Service Provider*: Avalara
    • Service*: addrVal
    • Invocation*: addrVal

    Click save once these fields are filled in, and it is now possible to preview the application to enter and validate any U.S. Street Address. While the preview is running, click on addrVal to enter an address. Once you enter an address and click "submit", click on geoCode to receive the latitude and longitude coordinates for the entered address.
    
    Video 13: