How to extend a standard mobile application

Developing a page extension in TypeScript typically involves the creation of a TypeScript file that extends or enhances the functionality of an existing standard page.

In this page, you can find the general steps to develop a page extension in TypeScript.

Setup your package

• Create a package in X3 for your project.
• Define nodes on specific properties in X3.
• You can customize the standard API operations with Entry points when possible. You can also override the standard operation with a specific operation.
• Once your TypeScript package is generated in VSCode, you are ready to develop a page extension.

Create a TypeScript file for your extension

• Create a new directory called page-extensions inside the lib folder.
• Create a new TypeScript file inside the page-extensions directory. The file name of the extended page should follow the following nomenclature: [name-of-the-page-to-be-extended]-extension.
• Write your TypeScript code in this file.
• For example, the file mobile-time-entry-inquiry-by-date-extension.ts:
  

The following example illustrates how to customize the Time entry mobile app with a page extension:

• Hide the standard Time category field
• Add the reference to the new specific Time classification field on the page.
• Add the Launching date column to the Project selection list.
  

getSerializedValues()

• When added on a page, the function getSerializedValues() allows to change or customize the payload.
• The action is performed before sending the payload to the server. It's an override of the original action and not a chained execution.
• The following example illustrates how to replace the Time entry description with the Time classification description if a Time classification has been selected on the Time entry line:
  

Write TypeScript code

• Use TypeScript to write code that enhances or extends the functionality of the standard page. This includes:
• Add specific properties or actions to the page.
• Hide standard properties.
• Override properties in the payload sent to the server.

Build your package

• Compile your package using the npm run build command.
• Run your package using the npm run start command.
• Open the developer test page in a browser to see the extension in action.
• Check the console for any errors or logs related to your TypeScript code.

Note: Remember the above steps provide a basic outline for creating a page extension in TypeScript.

Depending on the specific requirements and the page you’re extending, additional libraries or tools may be required.

You might need to handle potential compatibility conflicts with existing on the standard page.