5/17/2021 Admin

Upgrading a Blazor Oqtane Module

Oqtane is a Modular Application Framework. It leverages Blazor, an open source and cross-platform web UI framework for building single-page apps using .NET and C# instead of JavaScript. Oqtane allows you to create custom modules. You can learn about how to create those modules at the following link: Oqtane Module Creator.

It also allows you to upgrade those modules. To demonstrate this, we will use the Blazor Oqtane Survey Module as an example. It is an Oqtane module that allows administrators to create user surveys.

You can find more about the module at this link: Blazor Oqtane Survey Module.

Upgrading The Survey Module

The 1.0.1 version of the Survey module required a user to be logged in.

The enhancement was to add a new field to the OqtaneSurveyAnswer table, to allow an Anonymous Cookie to be captured to track survey responses from users who have not logged into the Oqtane site.

If a Oqtane site installed the latest version of the Survey module, everything would work as expected. However, if an Oqtane site had the previous version of the Survey module, we would want the module to be upgraded.

Steps To Upgrade an Oqtane Module

The following describe the general steps to upgrade a Oqtane module:

Client.csproj - Update Version
1. ModuleInfo.cs – Update Version and add current version to list of ReleaseVersions
Package.csproj - Update Version
1. .nuspec file - Update Version
Server.csproj - Update Version
1. Scripts – Add new .sql script (if needed) with the current version number, and add any new tables or views to .Uninstall.sql. Ensure that all .sql files have the Build Action as Embedded resource.
Shared.csproj - Update Version

Upgrading The Survey Module

The first step was to right-click on each project and select Properties.

Then update the Package version…

…and the Assembly version.

In the Client project, we open the ModuleInfo.cs file and update the Version property to:

Version = "1.0.2",

We also update the ReleaseVersions property to:

ReleaseVersions = "1.0.0,1.0.1,1.0.2",

The .nuspec file is opened and we update the Version property to:

<version>1.0.2</version>

We add a new .sql script to the Server project, using the following code:

/*  
  Make [dbo].[OqtaneSurvey].[UserId] INTEGER NULL
*/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
IF EXISTS (SELECT * FROM sys.objects WHERE object_id = OBJECT_ID(N'[dbo].[OqtaneSurvey]') 
AND type in (N'U'))
BEGIN
ALTER TABLE [dbo].[OqtaneSurvey] ALTER COLUMN [UserId] INTEGER NULL
END
GO
IF EXISTS (SELECT * FROM sys.objects WHERE object_id = OBJECT_ID(N'[dbo].[OqtaneSurveyAnswer]') 
AND type in (N'U'))
BEGIN
ALTER TABLE [dbo].[OqtaneSurveyAnswer] ALTER COLUMN [UserId] INTEGER NULL
END
GO
IF NOT EXISTS (SELECT * FROM sys.columns WHERE object_id = OBJECT_ID(N'[dbo].[OqtaneSurveyAnswer]') 
AND name = 'AnonymousCookie')
BEGIN
ALTER TABLE [dbo].[OqtaneSurveyAnswer] ADD [AnonymousCookie] nvarchar(500) NULL
END
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO

We then click on the file in the Solution Explorer, and in the Properties, set the Build Action to Embedded resource.

Note: When we later install the module, the Oqtane site will detect the embedded .sql script in the NuGet package and run the .sql scripts for any version between the installed version and the current version.

Created New NuGet Package

Finally, we switch the solution to Release mode. We then Rebuild the solution.

This will cause a new updated NuGet package to be created in the Oqtane project’s wwwroot/modules folder (see Configuring The Blazor Oqtane Blog Module for more information on how to determine where a NuGet package builds to).

Note: We can also upload that Nuget package to NuGet.org.

Upgrade The Module

We can then log into any Oqtane site as the Administrator account, and go to Module Management (In the Admin Dashboard).

Click on Install Module.

Choose Upload, then Choose Files, select the Oqtane.Survey.1.0.2.nupkg file, then click the Upload button.

After the file uploads, click the Install button.

Click the Restart link in the message that displays. Next, click the red Restart Application button that will then show. Finally, click the red Restart Application button that will show in the popup.