Sage 300 2018.1 Web SDK

Introduction

The Sage 300 Web SDK (SDK) is a collection of wizards, utilities, samples and documentation for developing Web Screens for the Sage 300 Application.

This week we released the Sage 300 2018.1 Web SDK to coincide with the release of the Sage 300 2018.1 Application.

It’s Available!

The SDK is available at https://github.com/SageNADev/Sage300-SDK.

Branches

As described in a previous blog and in the README file in the root of the repository, the branches contain the different versions of the SDK.

master

Contains the current version of the SDK (2018.1).

develop

Contains the in-progress version of the SDK (2018.2).

release-…

Contains the previous versions of the SDK (release-2017, release-2017.1, release-2017.2 and release-2018)

What’s New

Documentation

Updated documentation is available.

In the docs\development folder you will find documents which have updated screenshots in the setup and tutorial documents to reflect the new flow of the Code Generation Wizard.

In the docs\patterns folder you will find a new document for Coding Patterns. At this time, only one pattern is documented, but will soon contain more patterns implemented in the Sage 300 Web Screens.

The docs\presentations folder has been updated and includes a PowerPoint presentation for what’s new in the SDK for 2018.1.

In the docs\templates folder you will find the updated Word Template used by our PDX Content group.

In the docs\upgrades folder is a document for the upgrade procedures for moving partner source from Sage 300 2018 to Sage 300 2018.1. This folder also contains a document for manually upgrading a customization solution’s controller to inherit from our MultitenantControllerBase class instead of Microsoft’s Controller class.

In the docs\wizards folder you will find documents which have updated screenshots to reflect the new flow of the Code Generation Wizard and the new HeaderDetail Code Type.

Visual Studio Code Maps

Visual Studio Code Maps have been provided for specific entities, controllers, utilities and helper classes.

In the maps folder you will find various code maps which can be opened in Visual Studio to see a graph of relationships in specific classes.

Blog11CodeMap

Samples

The previous samples have been updated with new references and minor corrections.

The Receipt sample has been re-factored to use the new base class and implementation for HeaderDetail code type.

Solution Wizard

Numerous changes to the wizard to support the updated components and references in the Sage 300 web screens.

Customization Wizards

Numerous changes to the wizard to support the updated components and references in the Sage 300 web screens.

The Customization Wizard Plugin was modified to generate a controller inheriting from Sage’s MultitenantControllerBase instead of Controller. See the document in the docs\upgrades folder for manual steps.

Code Generation Wizard

Numerous changes to the wizard to support the updated components and references in the Sage 300 web screens.

The new HeaderDetail code type generates enough code to have a functioning header-detail screen that compiles and can be run. However, in this initial offering, a grid (main component of a header-detail screen) is not generated by the wizard. This is being planned for the next release of the SDK!

Blog11Step1

The flow of the wizard has been enhanced to support the new HeaderDetail code type with multiple entities (Accpac Business Views). Information that is relevant to all entities has been moved to the first step.

 

Blog11Step2A tree control has been added to the second step for adding, editing and deleting entities. The tree control displays and allows for hierarchical entities as required by the HeaderDetail code type.

 

Blog11Step2aThe Entity tab of the second step allows selection of the entity and editing of the properties.

Blog11Step2bThe Options tab of the second step allows selection of assorted options.

 

Blog11Step2cThe Properties tab of the second step allows for manual entry of properties for the DynamicQuery and Report code types. It now allows for the modification of property names before the code is generated for the other code types as well.

 

Blog11Step2dThe Compositions tab of the second step is only relevant for the HeaderDetail code type and allows for the compositions of the entity to be included or not. The wizard will generate the composition logic in the CreateBusinessEntities routine of the Repository class.

 

Blog11Step3

The third step has been refactored to display an XML representation of what will be generated by the wizard.

WebApi

A new GL Segments endpoint has been added.

Defects Corrected

The module name for a development partner’s menu item was not being localized when displayed in the window manager. This has been resolved.

An error might be encountered in the Clear Statistics sample. This has been resolved.

Vertical Menus

There are no code or menu changes required for the new Vertical Menus of the Sage 300 web screens. A default icon (colored puzzle image) will be assigned to a partner’s menu item.

In 2018.2, we are modifying this implementation to allow the partner to specify an icon they want to associate with their menu in the menu XML. The partner will then be required to deliver this icon along with the other module assemblies.

Blog11VerticalMenus

Summary

The Sage 300 2018.1 SDK is released and ready to be downloaded!

Documentation Updates, new Visual Studio Code Maps, a new Code Generation Wizard flow along with a new HeaderDetail Code Type, updated Samples, and a new WebApi endpoint are all in the SDK.

We continue to look forward to addressing the needs and expectations of the Sage partner community and ecosystem.

As a standard disclaimer, any topic in this article is subject to review and doesn’t represent a commitment as to when it will be available.

 

Advertisements

Sage 300 and Visual Studio’s Code Maps

Introduction

The Sage 300 web screens are comprised of 113+ Visual Studio projects. This represents a large and complex code base. Simply opening a project and viewing the components and references to understand the relationships and dependencies can be a daunting task.

The relationships and dependencies between not only projects but also classes and methods are sometimes best understood when presented visually.

Microsoft’s Code Maps, which is a core feature of Visual Studio 2013 Ultimate and Visual Studio 2015/2017 Enterprise Editions, is a fantastic tool to assist with the visualization of these relationships and dependencies.

ReSharper, which all internal Sage 300 developers use, also offers a graphical code mapping feature. However, the features, functionality and even the debugging integration with Code Maps make Visual Studio tool, in my opinion, the best tool to use.

This post will introduce the Visual Studio Code Maps and present how developers can leverage this tool to graphically display relationships and dependencies for a project or projects, a class or a method. Code Maps can assist not only new developers, who do not know anything about the code base, but also experienced developers wanting to better understand relationships and dependencies.

Code Maps

Code Maps is an architectural tool in Visual Studio that generates a graph, like a dependency graph, to assist the developer with understanding and viewing the relationships and dependencies of a large code base in a visually appealing, dynamic and interactive graphical display.

A code map visualizes code and project relationships and can even be viewed in a tab next to the code editor inside of Visual Studio. This allows the developer to see where they are in the map and therefore in the hierarchy of the code while in the code itself.

A code map may be saved within the solution or even exported as an image to email or an XPS viewer. While inside Visual Studio, the code map is interactive:

  • Add or remove or hide components in map
  • Add or remove filters which control relationships (Class, Methods, Call, References, Calls, Returns, etc.)
  • Add comments to a component or relationship
  • Double-click component to be taken to that place in the code
  • etc.

While all versions of Visual Studio can access (read-only) a Code Map, only the following versions of Visual Studio can create a Code Map:

Visual Studio 2013 Ultimate Edition and Visual Studio 2015/2017 Enterprise Edition

Example

In this example, I want to better understand the A/R Payment Code’s business repository located in the A/R Business Repository project of the A/R solution. I want a visual graph which Visual Studio’s Code Maps feature can generate.

Let’s start by creating a map for the Payment Code Repository. Open the PaymentCodeRepository class and Right-Click on the name in the code window and select the Show on Code Map option:

Blog10Fig1

Figure 1: Generate code map for class

The code map for the class will be generated with a green chevron indicating where in the code the code window is:

Blog10Fig2

Figure 2: Generated code map for class

Hover over the code map and select the dropdown chevron to retrieve the components in this class:

Blog10Fig3

Figure 3: Retrieve components of class

The components (methods, properties, etc.) of the class are retrieved and added to the code map:

Blog10Fig4

Figure 4: Components in class

We can visually see all the methods and properties in the class. I’m interested in the GetAccessRights method, the methods that this routine invokes, and where they are located. Rick-Click on the GetAccessRights component in the code map and select the Show Methods This Calls option:

Blog10Fig5

Figure 5: Show methods

Note that the code map window is side by side with the code window.

Upon showing the methods that are called from this routine, you will notice that they are coming from an external assembly or assemblies:

Blog10Fig6

Figure 6: Method calls are in external assembly(s)

Hover over the External component and select the dropdown chevron to retrieve the components in this class:

Blog10Fig7

Figure 7: Retrieve and show assembly(s)

The external assembly is now shown:

Blog10Fig8

Figure 8: External methods are in the Common BusinessRepository assembly

Hover over the external assembly and select the dropdown chevron to show the methods:

Blog10Fig9

Figure 9: Retrieve and show methods

The methods are in a folder within the assembly (namespace):

Blog10Fig10

Figure 10: External methods are in the BusinessRepositoryBase namespace

Hover over the external assembly and select the dropdown chevron to show the methods:

Blog10Fig11

Figure 11: Retrieve and show methods

We are getting closer! We can see now that the methods are in two different classes:

Blog10Fig12

Figure 12: External methods are in the BaseRepository and FlatRepository classes

Hover over the two classes and select the dropdown chevrons to show the methods which results in our final display:

Blog10Fig13

Figure 13: PaymentCodeRepository showing external reference and methods

We wanted to see where the GetAccessRights and SecurityCheck methods were located and Code Maps provided a visual graph in just a few steps.

Blog10Fig14

Figure 14: GetAccessRights routine in the PaymentCodeRepository

Code Map Toolbar

Blog10Fig15

Figure 15: Code Map Toolbar

The Code Map Toolbar provides numerous options that can be undertaken on the code map:

  • Undo
    • Undo recent changes to the code map
  • Show Related
    • Context items for acting on the selected component, such as Find All References, Show Methods This Calls, etc.
  • Layout
    • Context items for how the code map is displayed, such as Top to Bottom, etc.
  • Find
    • Find feature
  • Call Stack
    • Automatically show debugger call stack on Code Map
  • Share
    • Collaboration options, such as Copy Image, Email as Image or Portable XPS (to be viewed in XPS viewer), Save as Portable XPS, Save as DGML, Move DGML (once saved) into a folder/project within the solution, etc.
  • Comment
    • Add comment to the code map
  • Zoom
    • Zoom to fit the code map window or enter a zoom percentage (mouse wheel also controls zooming in and out)
  • Legend
    • Toggle to display window of icons and icon descriptions of icons
  • Filters
    • Toggle to display window of filters available for selection and de-selection
  • Skip Build
    • Toggle to determine if code map should build solution before generation of code map
  • Include Parents
    • Toggle to determine if code map should include parents of components to be generated

Summary

The Sage 300 web screens represent a large and complex code base where understanding and viewing the components, relationships and references can be a daunting task.

Microsoft’s Code Maps, which is a core feature of Visual Studio 2013 Ultimate and Visual Studio 2015/2017 Enterprise Editions, is a tool that provides the ability to visualize relationships and dependencies in real time from within the Visual Studio IDE.

To create a Code Map you must be on either Visual Studio 2013 Ultimate Edition or Visual Studio 2015/2017 Enterprise Edition.

Developers can leverage this tool to graphically display relationships and dependencies for a project or projects, a class or method. A simple example was used to provide a graph of a class and its externally referenced method calls.

The graphs can be used at an elevated level to show project relationships or a detailed level to show code flow and dependencies. This visualization is a proven way to understand complex concepts, and understand and navigate complex code.

As a standard disclaimer, any topic in this article is subject to review and doesn’t represent a commitment as to when it will be available.