AutoMob : Create Data Model and UI Wireframes and link them on to flows

In our Auto Mobile Sales application, we have created already few empty sections and flow actions in the ParentPost. Lets map them to link to flows that we created, to proceed with the next steps. 

#1 Create property "CustomerInfo", which holds the information of Customer. So its a page of type "Tata-FW-AuMobFW-Data-Customer".

Where to create this property : Obviously at Framework layer for the sake of reusability. Now, can this property be reusable across case types, then it's good practice to create in your framework layer class group "Tata-FW-AuMobFW-Work".

#2 Now that, you can go back to screen 1 UI : SelectCustomerType as part of our previous post. Try to add an embedded section (SectionInclude) SelectCustomerTypeInner in the context page of  ".CustomerInfo", page we created as part of step #1.

#3 As part of data type, we created property : CustomerType, which would be Radio button on the screen.  We can configure with the local list : "New", "Exiting".

User would select "New" in case of  New Customer. Or else "Existing" in case of existing Customer.

#3.1 Now we have to configure, SelectCustomerTypeInner in the Tata-FW-AuMobFW-Data-Customer, as shown in step #2. Below is the configuration detail. 

#3.2 Now we can add CustomerID to the same section, so that user can enter CustomerID for existing customers. Configuration Detail of CustomerID is shown here : 

#4 We are good with Screen 1 : SelectCustomerType >> SelectCustomerTypeInner.

 Now we can move to Screen 2 : where we configure section : ShowCustomerDetails in Tata-FW-AuMobFW-Work. We can add embedded section in the context page : CustomerInfo : with the ShowCustomerDetailsInner section to be created (in Tata-FW-AuMobFW-Data-Customer).

#4.1 ShowCustomerDetailInner can be creted as shown below. And configuration is easy : to keep it simple, we have taken all the fields as Text. So drag and drop and referring the properties that we already have in the data class (Tata-FW-AuMobFW-Data-Customer) should do. 

#4.2 Once embedded section is saved already and ShowCustomerDetails would look like below. 

Please add header "Customer Details".

#5 Screen 1 configuration: 

Section Name : SelectCustomerType >> SelectCustomerTypeInner

FlowAction Name : SelectCustomerType

FlowAction Pre Data Transform : PreSelectCustomerType // initialization can go here.

#6 Screen 2 configuration:

Section Name : ShowCustomerDetails

FlowActionName : ShowCustomerDetails

Pre Data  Transform : PreShowCustomerDetails // This logic would be shown shortly step by step

Post Data Transform : PostShowCustomerDetails // This logic would be shown shortly step by step

#7 Screen 3 configuration:

Flow Name : ShowGeneratedDetails // Call this flow  in "CaptureCustomerDetailsWrapper" flow

Section Name : ShowGeneratedDetails // Add .CustomerInfo.CustomerID to this section cell

FlowAction Name : ShowGeneratedDetails

Once user submits the Customer Details screen with necessary modification, it should be saved and Customer ID to be generated in the "New" Customer scenario. Where as for an existing customer, information should be update for the same Customer ID. 

To keep it simple, lets display only Customer ID here in both the scenarios. We can scope the level of  other requirements in next post. 

With our changes in the flow, it looks as below:

And our Case Type : Purchase Request, looks as below. So whatever changes we made, you can notice those changes in the steps of the stage. 

Example:

StageName : Capture Customer Details

Step 1 : CaptureCustomerDetails

Step 2 : ShowGeneratedDetails

Note : Please feel free to choose your own meaningful names for stages, steps, ...

Continue with the Parent Post : ParentPost