Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Corrected links that should have been relative instead of absolute.

Web Forms are an interactive feature that allows you to create a form to transfer data from a source to destination. Adeptia Connect supports Sencha Architect to design Web Forms. Web Forms are so simple to use that a business user can easily create it by adding controls, customizing the appearance and layout, and adding rules that decide the behavior of the form. 

Use Sencha Architect to design a Web Form that can be used in a Transaction/Template.

Prerequisites

Before using Sencha Architect to Design a Web Form, ensure that you meet the following requirement:

  • You must install Sencha Architect on your system. Click here for latest version of Sencha Architect.

 

You can Design a Web Form using Sencha Architect in two ways. 

Install Sencha Architect on your system. Click here for latest version of Sencha Architect.
Expand
titleUsing Transaction/Template Form
  1. Download and unzip the Transaction/Template Form and place it in your system at desired location (e.g. c:\projects\dashboard\resources\).
  2. Open the Sencha Architect and click Open to select the unzipped Transaction/Template Form for editing. Click here for Sencha Architect Tutorial.



  3. Design a form by using Sencha drag-and-drop feature. Choose components from the right hand panel and drop them on the center canvas.



  4. Search the Name from Select the field and search the Name attribute from the right hand attribute panel and enter panel. Enter the Name which will appear in the JSON schema.


     


  5. Click Image RemovedImage Added and select Build Settings from the drop-down list.

    Image Removed

     Image Added

  6. Select ProductProduction as Environment and provide the publish path. Click Save and the application will appear with specified project name in the selected provided Publish Path. 

    Image Added

    Image Removed 

    Info
    Choosing Product Production as Environment will process your Web Form quickly as it compress the files.
    Info
    Click Image Removed Image Added preview button to preview the Web Form. Your default browser will open a new tab showing the Web Form.

 

...

Install Sencha Architect on your system. Click here for latest version of Sencha Architect.
Expand
titleUsing New Project Option
  1. Open the Sencha Architect and click New Project to create a Web Form. Click here for Sencha Architect Tutorial.



  2. Choose the framework: framework Ext JS 6.6.x ModernClassic at the top-right of the New Project screen.
  3. Choose a project format: Select the Blank Project and click Create.



  4. Select the Form Panel from right hand Toolbox Panel and Drag and Drop to the center canvas.

    Image Added


  5. Design a form by using Sencha drag-and-drop feature. Choose components from the right hand panel and drop them on the center canvas.


    Click Save. The

  6. Select the field and search the Name attribute from the right hand attribute panel. Enter the Name which will appear in the JSON schema.

    Image Added

  7. Create Submit button with the help of Project Inspector and Attribute Panel. To create Submit Button, follow these steps:

    1. Drag and Drop the Button from right hand Toolbox Panel to the center canvas.

    2. Rename the Button as required (e.g. Submit).

    3. Right click the Submit Button in Project Inspector Panel.

    4. Select the Event 'Click' from the drop-down list and provide Function Name.

    5. Click Create Binding.

      Image Added

      Image Added

       

  8. Click onButtonClick from Project Inspector Panel and add the code window.parent.Ext.ComponentQuery.query('transactionswrapper')[0].getController().submitWebForm(button.up('form')); in Code Tab.

    Image Added

     

  9. To save the project, provide the path and click Save.

    Image Added

     

  10. Click Image Added and select Build Settings from the drop-down list.

    Image Added

  11. Select Production as Environment and provide the publish path. Click Save and the application will appear with specified project name in the selected provided Publish Path. 
    Image Removed
    Image Added

 

Info
Choosing Production as Environment will process your Web Form quickly as it compress the files.
Info
Click Image Modified preview button to preview the Web Form. Your default browser will open a new tab showing the Web Form.


 

Follow one of these steps to deploy the application:

...