How it works –

Step 1: Create a Project

Creating a project in our application involves specifying a project name and providing API documentation according to your project’s requirements. Below are the steps to follow depending on the type of API documentation you wish to provide:

OpenAPI Swagger URL (swaggerUrl):
  • Description: Select this if you have JSON text format of your API documentation.
  • Instructions: Provide the complete JSON text of your OpenAPI Swagger documentation. Ensure that the text is a valid JSON that conforms to the OpenAPI specifications.
OpenAPI Swagger File (swaggerFilePath):
  • Description: Use this option if you prefer to upload a file containing your API documentation.
  • Instructions: Upload the file containing your OpenAPI Swagger documentation. Please ensure the file is in a supported format (.json or .yaml) and adheres to the OpenAPI specifications.
Data XML (oDataXMLText):
  • Description: Choose this for OData services using XML format.
  • Instructions: Provide the XML text that represents your OData service. Ensure that the XML is valid and correctly describes the OData service according to the OData specifications.
None (none):
  • Description: Select this if you do not wish to provide any predefined API documentation.
  • Instructions: You may manually add custom paths and define your API without any predefined structure. This option allows full flexibility to define the API as per your unique requirements
Note
  • Regardless of the option you choose, ensure that your provided information is valid and conforms to the respective API specification standards to avoid errors during project creation.

Creating Forms from API Documentation

Once you have successfully created a project and added your API documentation, our system automatically extracts all available paths and the associated schemas from the JSON file or text you provided. You can now create interactive forms based on these schemas to facilitate data entry or data modification requests. Follow the steps below to create and manage forms:

Step 1: View All Available Paths and Schemas

  • Navigate to the API Paths section: In your project dashboard, go to the ‘API Paths’ section where you can see a list of all paths extracted from your API documentation.
  • Review Schemas: Each path will have an associated schema that defines the structure of the data expected by that API endpoint. Review these schemas to understand the fields available for form creation.

Step 2: Create Forms

  • Select a Path:Choose the API path for which you want to create a form. Click on the ‘Create Form’ button next to the selected path.
  • Create Form Popup: Provide a name for form for easy identification.
  • Form Builder: You will be directed to a form builder interface. Here, the fields will be pre-populated based on the schema associated with the chosen path. You can customize the form fields:
  • Edit Field Properties: Modify field types, add placeholders, set default values, or make a field required as per your needs.
  • Add Custom Fields: You can also add custom fields that are not defined in the schema if your API supports it.
  • Save Form: Once you have customized the form to your satisfaction, save the form.

Step 3 : Manage Forms

  • Accessing Forms:All created forms are listed under the ‘Created Forms’ section in your project dashboard. Here, you can view, edit, or delete any form.
  • Edit Forms: To modify a form, click on the ‘Edit’ button next to the form you wish to change. Make the necessary changes in the form builder and save them.
  • Delete Forms: If a form is no longer needed, you can remove it by clicking the ‘Delete’ button. Confirm your action in the prompt to finalize the deletion
  • Export Forms: you can export form by clicking the ‘Export’ button. Follow Instructions to implement form in your application

Best Practices for Form Creation

  • Validation: Ensure that the forms adhere to the constraints set by your API’s schema. This includes proper data types, required fields, and array structures.
  • Testing: After creating a form, test it by submitting dummy data to ensure that the API endpoint processes it correctly.
  • User Feedback: Incorporate feedback mechanisms in your forms to alert users of successful submissions or errors.

Exporting Forms from Your Project

Exporting forms allows you to download or copy the code and schema files necessary to implement the form in other environments or projects. This feature is especially useful for developers looking to integrate these forms into existing applications or for archival purposes. Here’s how you can export forms from your project:

Step 1: Access the Export Feature

  • Navigate to Created Forms:Go to the ‘ Created Forms’ section within your project dashboard where all your created forms are listed. Choose a Form to Export: Locate the form you wish to export. Click the ‘Export Form’ button associated with that form. This action will open a popup explaining the next steps and providing the files for download.

Step 2: Understanding the Export Popup

  • The export popup provides you with three essential files:
  • Component.html: This is the HTML file containing the structural layout of the form. It includes all the form fields and their respective HTML elements.
  • Component.ts: This TypeScript file contains the logic for the form, including initialization, validations, and submission functions.
  • schema.ts and layout.ts: These TypeScript files define the data schema and layout for the form, ensuring that the form adheres to the defined API schema and maintains the specified layout structure.

Step 3: Copy or Download Files

  • Copy to Clipboard: You can directly copy the content of each file to your clipboard by clicking the ‘Copy’ button next to the respective file. This is useful for quickly pasting the code into your development environment.
  • Download Files: Alternatively, click the ‘Download’ button to download the files. The files will be downloaded to your default downloads folder or a location you specify.

Step 4: Implement the Exported Form

  • Integration: Once downloaded or copied, integrate the form into your application by placing the HTML and TypeScript files in the appropriate directories.
  • Testing After integrating the files, test the form in your application to ensure it functions as expected. Check for any errors and ensure that the form communicates correctly with the API.

Best Practices for Form Export

  • Version Control: Keep track of versions if you make modifications to the exported files. This helps in managing changes and maintaining consistency across different versions of your application.
  • Documentation: Document any changes you make to the original exported files, especially if these modifications are specific to the integration environment.
  • Security: Ensure that any data handling or submissions through the forms adhere to security best practices to protect user data.

Integrating Exported Forms into Your Angular Application

Integrating exported forms into your Angular application involves several key steps, from setting up your environment to integrating and testing the form components. Follow these detailed instructions to ensure a smooth integration:

Step 1: Setup Your Angular Environment

  • New Angular Application: If you do not have an Angular application, create one by running: “` ng new my-app cd my-app “` This sets up a new Angular project in the `my-app` directory.
  • Existing Angular Application: If you are integrating the form into an existing Angular application, navigate to the project directory: “` cd existing-app-directory “`

Step 2: Install Required NPM Package

  • Install the `dynamic-form` package which is required to render the forms dynamically in your Angular application. Run the following command in your project directory: “` npm install dynamic-form

Step 3: Import and Configure the Components

  • Component Files: If you have not already downloaded the component files (`Component.html`, `Component.ts`, `schema.ts`, `layout.ts`) during the export process, ensure you have these files in your project.
  • Create/Place Components: Place these files in the appropriate directory within your Angular application. Typically, this would be under the `src/app/` directory.
  • Register Components: Ensure that your components are declared and exported in the appropriate Angular module (usually `app.module.ts` or a specific feature module).

Step 4: Implement the Dynamic Form Component

  • Add the dynamic form component to the desired component template file where you want the form to appear. Insert the following code: “`html “`
  • Define Variables in Component: In your `Component.ts`, ensure you have the `formLayout`, `schema`, and optionally `formData` defined. `formData` can be used to pre-populate the form if needed.
  • Button Click Event: Implement the `onBtnClick($event)` function to handle form submissions or button click events. This function should define what happens when the user interacts with the form buttons.

Step 5: Run Your Angular Application

  • – After integrating the form, run your application to see the form in action: “` ng serve “` Navigate to `http://localhost:4200/` in your web browser to view your application. The form should be visible and functional as per the design created by the user.
  • Best Practices for Form Integration
  • Testing: Thoroughly test the form to ensure it behaves as expected. Check validations, data submissions, and responsiveness.
  • Error Handling: Implement robust error handling in your form logic to manage any API failures or data validation errors.
  • Updates and Maintenance: Keep your dependencies up to date and regularly check for any updates in the `dynamic-form` package that may require changes to your implementation.
Scroll to Top