Getting Started with Sage300c Customization Wizards

To kick things off, we’ll quickly go over the two main wizards you’ll use to create a web screen customization. Sample projects that use these are in the SDK on Github, but we’ll illustrate them here for a quick reference. You’ll find an example of an OE Order Entry screen customization, in the SDK, at: /docs/customization/Sage300SDK_WebScreenOrderEntryCustomizationTutorial.docx

The first wizard you’ll run, is for the client side web UI. You can find this wizard in the SDK, at: /bin/wizards/Sage.CA.SBS.ERP.Sage300.CustomizationWizard.exe

Sage 300c Web Customization Wizard

The screenshot above, is the 1st screen of this wizard. Sage has a more thorough walkthrough of how to use this wizard in their Order Entry tutorial referenced above.

Through this wizard, you add screens (OE Order Entry, AR Invoice Entry, etc.) and controls (textboxes, buttons, finders, etc.) to your customization. It will then produce the javascript, XML and manifest files that the web screens require to lay out the UI elements of your customization. The javascript file is the base from which you will be adding your custom UI logic.

Some HTML elements such as password boxes (i.e. an input field of type ‘password’) are currently not available as options via the wizard. A way to get them into your customization would be through javascript. That is, you would dynamically add the HTML elements to the DOM via javascript after the page has loaded.

The code and files generated from this wizard are for the client/UI side. This is enough for doing custom logic on the presentation layer, but what if you need to fetch data from the server? This is where the 2nd wizard comes in.

Before you can use the 2nd wizard, you’ll need to install Sage300UICustomizationSolution.vsix into Visual Studio (as of August 2019, that is for VS2017). This can be found in the SDK, at bin/wizards/Sage300UICustomizationSolution.vsix

Once installed, you’ll create a project in Visual Studio of type ‘Sage 300 UI Customization Wizard’.

Sage 300 UI Customization WIzard

From here, select the manifest file produced from the 1st wizard. Finish the wizard, and it will generate a project for a custom controller. If you encounter any issues at this step, verify that you have the latest version of Visual Studio, and ensure you are using the correct Sage 300 Web SDK version.

In future posts, we’ll go over how to package and install a customization, how to use the Sage javascript libraries, intercepting user actions and doing custom logic on the server side using a custom controller.

One thought on “Getting Started with Sage300c Customization Wizards

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s