Designing of Web Form

Now we will use Sencha Architect to design a form in transaction and template and design custom pages which can we published as link. So there are two use where we will use Sencha Architect:

• To design form which can be used in transaction and template.
• To design custom pages which can be published as link at defined navigation path like "Pantner",  "Dashboard" tab etc.(e have already a separate document for this requirement with JIRA ID: ACE-4041.)
  Link for that document : /wiki/spaces/ProductSpace/pages/16254770

Design Forms Using Sencha Architect

1. Install Sencha Architect on your machine.
2. Open the Sencha Architect and click on plus(+) button on the top left corner.
3. Design the form by using Sencha drag-and-drop feature. You can choose components from the left hand panel and drop them on the centre canvas. You can provide the configuration properties to the components like min. length, max length, allow blank, blank text, validation etc.
4. Save 
5. Copy the folder created from step 4 and place it directly in web-apps folder of your application.

UI Design

Use Sencha Architect to design Form, use these form in Connect web form and use those web forms in Transaction/Template in Connect.

1. we will design the form by using Sencha Architect and use this form in Transaction/Template type Web Form. At this step we will create the JSON Schema for this web form. So if we change the form in future then we will update the JSON Schema.In web form table we will put the schema Id which is associated with this Web form. The name of Schema will be "<Web form name>_Schema".
   
   
   
   
2. After creating a transaction/template type web form, we need to activate this web form.
   
   
   
   
3. Now we will create a template by using this web form.
   
   
   
   
4. The type of this template will be “File & Message”. 
   
   
   
   
5. The direction of this template will be “Inbound”.
   
   
   
   
6. At the source step, we will select the “Web Form” from the application list.
   
   
   
   
7. Now at the “Choose Web Form” step, we will select the web form which we is created in above steps.
   
   
   
   
8. We will show the schema step in this case and show the JSON schema which is associated with web form.
   
   
   
   
9. At the mapping step when create the mapping then JSON schema (associated with selected web form) selected as Source Schema in wizard previous step will load as source schema.
   
   
   
   
10. Now after activating the template, we will create the transaction from this template and journey of this transaction will be similar to the other transaction. 
    
    
    
    
11. When “Run Now” the we will open the same web form which is selected in Template and user can fill the form and click on submit to run this transaction.
    
    
    
    
12.  In dashboard we will display the execution log similarly we are displaying for the Frevvo Forms.
    
    

Backend Design

1. In back-end we will create the JSON schema at the time of web form creation. We will send the JSON of selected form from GUI and create a JSON schema from this JSON. To create the the JSON schema we will write a method in WebFormRestResource.java.
2. We will add a column in AC_WEBFORM table to persist the schema id which is created with web form so that we will show that schema in Template GUI. Although we can add this field in JSON Schema table but that will impact AIS so I am adding it Web Form table because it used only in Connect.
3. We will write a separate REST resource is used to to execute the transaction when ever user submit the form from the transaction.

Backend Design

N/A