Search code examples
c#razor-pagesmoryx

How can I add a new UI Interface in an existing Moryx 8 project?

I'm currently working on an existing Moryx 8 project. For my specific usage I would like to know how I can add a new page. I envision adding a new item to the left navigation bar, which will display a new HTML page that can interact with data from the system. Just to understand the working, I would start by simply display information about resources of the project.

Personally I tried to find an approach where I could see how the developer of moryx design and configure there pages. For that i was searching throughout different projects, which was unsuccessful. Furthermore I tried to watch out for hidden files, which are excluded or hidden in the csproj-files. Additionally I tried to integrate a new angular project into the existing project which didn't work as planned because the Angular CLI does'nt create an csproj-file.

The only working way I found was by integrating an razor page, which seems like an working but not very efficient alternative. For that you can create a new project inside your solution an add an cshtml page.

@page
@using Microsoft.AspNetCore.Authorization;
@using Moryx.Asp.Integration
@using System.ComponentModel.DataAnnotations
@using Moryx.DigitalPrinter.Web.MyFeature.Pages

@{
    ViewData["Title"] = "Printer Maintenance";
    ViewData["BaseRef"] = "print/";

    Layout = "_Layout";
}

@attribute [WebModule("Maintenance", "print")]
@model Page1Model

<!DOCTYPE html>

<style>
   
   // Style-Code here...
   
</style>

<html>

   // HTML-Code here...

</html>

On the level below the cshtml-file is the model with the defined properties used for the page.

Now my question is, is this the appropiate way to add pages to the web UI in Moryx 8? I would like to know if there is any more recommend way to do this.

Solution

  • Adding a new page
    That is the intended way to add additional pages to the webpage provided by the Moryx.Launcher nuget package.

    For the razor class library that you created, you can remove all other files except the page from which you provided the code in your question. If you don't intend to use the model that comes with the page you can even remove that.
    The WebModule attribute is important here, since it marks this page as something to provide in the navigation bar. Also the Layout propery is correctly set. This ensures that the layout from the Moryx.Launcher package is applied to your razor page as well. Meaning that by adding the layout here, you will still have the sidebar and all the other functions from the launcher after you navigated to your page.

    If you want to use an Angular
    Since you already mentioned that you wanted to add an Angular project to you application, let me provide you with the code to integrate it here.
    First, create a new angular application within the directory of your .csproj file.
    Second, replace everything under the @attribute [Webmodule(...)] with the following code

    // MyModule.cshtml

@section Styles {
  <link rel="stylesheet" href="/_content/<YourC#ProjectName>/styles.css">
}
@section Scripts
{
  <script src="/_content/<YourC#ProjectName>/runtime.js" type="module"></script>
  <script src="/_content/<YourC#ProjectName>/polyfills.js" type="module"></script>
  <script src="/_content/<YourC#ProjectName>/main.js" type="module"></script>
}

<app-root></app-root>

    This will later load the angular application into the razor page you navigate to in the shell. Note: Make sure to insert your project name into the placeholders
    Third, you can simplify your life by adjusting the outputPath in your angular.json file. Change it to wwwroot/ in order to build the angular application directly into the asset directory of your RCL and make sure outputHashing is set to none.

    Instead of the angular application, you could insert really any html, css and js you like here. This means you are free to use whatever Web-Framework you want to use (Angular, React, Vue, this list is endless so why do I even bother to give examples...).
    The cost for this flexibility is the complexity that you mentioned in your question.

    To get updates to you project
    You will notice that your IDE will not be able to hot-reload changes you do in angular to your webpage. I would generally suggest to just use ng serve for development and only verify in the end that everything looks nice within the layout of the Moryx.Launcher package as well. You can use environment variables in angular to get your UI to call the proper endpoints while developing and while it rests within the layout in production.
    To see the changes in you application you will need to run ng build, as only this will generate the artifacts to be found in the wwwroot directory.