Skip to content

Commit

Permalink
docs: update React 19 version info and remove beta reference - FUI-2273
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArturKrasinski
ArturKrasinski committed Dec 13, 2024
2 parents 63905b5 + 86c47ce commit 77faa51
Show file tree
Hide file tree
Showing 8 changed files with 100 additions and 141 deletions.
59 changes: 19 additions & 40 deletions docs/002_how-to/40_alm-app/01_getting-started.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,29 +23,16 @@ If you haven't received this or don't know your details, contact:<br></br> dev.s

1. Go to [Genesis launchpad](https://launchpad.genesis.global/) and sign in.

2. Click on the **Start Cloud Workspace** button.

3. Wait for Cloud Workspace to start. Then click on the **Open Create** button.
2. The ALM app is listed as a template in the lower part of the screen. Click on the `Open in Create` button for the app.

## Genesis Create

Genesis Create enables you to create a Genesis application from scratch in a very short space of time, without writing any code.

In this tutorial, we want to highlight how easily you can take an app created using Genesis Create, and dive into the code to add new features and functions.

So, we are going to give you the whole ALM app, created using Genesis Create.
And here it is:

[genesis.create.json](https://github.com/genesiscommunitysuccess/alm-app/blob/master/.genx/genesis.create.json)


1. Copy or download this file onto your PC. (When you view the file, you can click on the three dots at the top right to download the raw file.)

2. In Genesis Create, click on the three dots in the top right of the screen, then select **Load**.

3. Select the JSON file. This automatically uploads and populates all the required fields for the app.
:::tip
You can find the [JSON file for the app](https://github.com/genesiscommunitysuccess/alm-app/blob/master/.genx/genesis.create.json) on github if you want to work with the project in your own IDE.
:::

### Looking at your app in Genesis Create
In short, Genesis Create enables you to:

- select the components you need for your app
Expand All @@ -58,60 +45,52 @@ In short, Genesis Create enables you to:

These stages are all set out at the top left of the Create window.

You can use the **Next** and **Back** buttons to move back and forward through the steps.
You can use the `Next` and `Back` buttons to move back and forward through the steps.

:::tip
Feel free to look into each step and see what has been set up.

Once you have done this, click on the **Next** until you reach the Summary page.
Once you have done this, click on the `Next` until you reach the Summary page.
:::

### Running and building

Make sure you are on the Summary page of Genesis Create. Click on the **Open in Genesis Cloud Workspace** tab, then on the **Open in Genesis Cloud Workspace** button.
Make sure you are on the Summary page of Genesis Create. Click on the `Open in Genesis Cloud Workspace` tab, then on the `Open in Genesis Cloud Workspace` button.

This generates a project and opens an IDE in the Cloud Workspace.

You can now build and run the app.

1. Click on the menu icon to the left and select **View** => **Command Palette**.

![](/img/view-palette.png)

2. To see the list of available commands, type **Genesis:**. Then select **Genesis: Unpack project** to display a list of available projects.
You can browse through the project that has been generated by Genesis Create.

![](/img/unpack-project.png)
- The `client` subdirectory contains a fully working web application for the front end of our application.
- The `server` subdirectory contains the generated Genesis configuration files for each of the microservices that make up the back end of the application.

3. Select the appropriate project to open. After a moment, this displays a list of projects, and yours should be on top. The filename is the app name you specified at the beginning, plus a date and time stamp.

![](/img/select-project.png)
You can now build and run the app.

4. Click on your project to open it.<br></br>
Now you can browse through the project that has been generated by Genesis Create.
1. Click on the menu icon to the left and select `View -> Command Palette`.

- The **client** subdirectory contains a fully working web application for the front end of our application.
- The **server** subdirectory contains the generated Genesis configuration files for each of the microservices that make up the back-end of the application.
![](/img/view-palette.png)

5. Select **View** => **Command Palette** and then select **Genesis Build Project**. This starts a full build. When this is complete, you will see the message **BUILD SUCCESSFUL** in the terminal tab at the bottom right of the screen.
2. To see the list of available commands, type `Genesis:`. Then select `Genesis Build Project`. This starts a full build. When this is complete, you will see the message `BUILD SUCCESSFUL` in the terminal tab at the bottom right of the screen.

6. Now you can initialise the database and start our server and client processes. Click the **Run and Debug** icon.
3. Now you can initialise the database and start our server and client processes. Click the `Run and Debug` icon.

![](/img/run-debug-icon.png)

7. Select **Bootstrap + Start App**, then click on the **Start** button at the left of the selector.
4. Select `Bootstrap + Start App`, then click on the `Start` button at the left of the selector.

![](/img/bootstrap-start-app.png)

This creates the database, loads some data and applies permissions. It takes a few minutes to complete.

8. When all the processes are **UP**, switch to the **PORTS** tab at the bottom. Go to the **Web** line and click on the **Open in Browser** icon.
5. When all the processes are `UP`, switch to the `PORTS` tab at the bottom. Go to the `Web` line and click on the `Open in Browser` icon.

![](/img/ports-web.png)

:::tip
If the web port (6060) has not been displayed in the **PORTS** tab automatically, you can add it manually:
If the web port (6060) has not been displayed in the `PORTS` tab automatically, you can add it manually:

Select the blue **Add Port** button and type 6060 in the field that appears. This adds the web port.
Select the blue `Add Port` button and type 6060 in the field that appears. This adds the web port.
:::

When the web application is displayed in your browser, you can login using:
Expand Down
8 changes: 4 additions & 4 deletions docs/002_how-to/40_alm-app/02_improving-back-end.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ If you have entered some trades within the default application, you may have not

Let’s add some pro-code to get the position calculation to include the direction of the trade.

1. Go to the file **ALM\server\ALM-app\src\main\genesis\scripts\ALM-consolidator.kts**.
1. Go to the file `ALM\server\ALM-app\src\main\genesis\scripts\ALM-consolidator.kts`.

The original consolidator script should look this (but it probably includes additional comments):

Expand Down Expand Up @@ -72,7 +72,7 @@ So, we shall now use two consolidator blocks to implement our change.

- We can add further consolidators to also take into account `LOAN_TRADE` and `CD_TRADE` movements.

2. Copy the entire code block below and replace the entire contents of the file **ALM-consolidator.kts**.
2. Copy the entire code block below and replace the entire contents of the file `ALM-consolidator.kts`.

```kotlin
import global.genesis.gen.dao.enums.ALM.fx_trade.Side
Expand Down Expand Up @@ -170,7 +170,7 @@ Genesis automatically audits data if you select `Generate Audit Trail` during Cr

However, there is often a requirement for a version to appear directly on the trade - this can be done simply with pro-code.

1. Go to the file **ALM/server/ALM-app/src/main/genesis/cfg/ALM-tables-dictionary.kts**.
1. Go to the file `ALM/server/ALM-app/src/main/genesis/cfg/ALM-tables-dictionary.kts`.

2. Ensure the `TRADE_VERSION` field is available on your `FX_TRADE` table, and add a default value to it. Set the default value to 1 so every new trade entering the system starts as version 1.

Expand All @@ -179,7 +179,7 @@ field("TRADE_VERSION", LONG).notNull().default(1)
```
Next, let’s add the logic to the events.

1. Go to the file **ALM/server/ALM-app/src/main/genesis/scripts/ALM-eventhandler.kts**.
1. Go to the file `ALM/server/ALM-app/src/main/genesis/scripts/ALM-eventhandler.kts`.

2. Go to the `FX_TRADE_MODIFY` section and add the following code to increment the version on modification:

Expand Down
42 changes: 21 additions & 21 deletions docs/002_how-to/40_alm-app/03_improving-front-end.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@ import TabItem from '@theme/TabItem';

Now we can tidy up and improve some elements of the GUI to make things look a bit nicer.

The majority of this section will see changes made in the front-end folder, which is found under **ALM/client**.
The majority of this section will see changes made in the front-end folder, which is found under `ALM/client`.

## Fixing capitalisation on front-end grids
Genesis Create saves with coding case, rather than visual case.

So, to start, let's do something very easy. We shall update some of the names in the front-end grid.

1. Open the file **ALM\client\src\routes\config.ts**.
1. Open the file `ALM\client\src\routes\config.ts`.

2. Change the capitalisation of the tab names (titles) in the GUI:

Expand All @@ -41,7 +41,7 @@ So, to start, let's do something very easy. We shall update some of the names in
OK, we are actually going to change the back-end code here - but don't tell anyone.
:::

1. Open the file **ALM\server\ALM-app\src\main\genesis\scripts\ALM-reqrep.kts**.
1. Open the file `ALM\server\ALM-app\src\main\genesis\scripts\ALM-reqrep.kts`.

2. Replace the `POSITION` request reply with the `where` clause, as below:

Expand All @@ -56,7 +56,7 @@ requestReply(POSITION) {
## Formatting on positive/negative numbers
The code snippet below will make positive numbers green and negative numbers red.

1. In the folder **ALM\client\src\utils**, create a new file called **util-formatters.ts**.
1. In the folder `ALM\client\src\utils`, create a new file called `util-formatters.ts`.

2. Add the code below to the file. (We'll need to use this function in a few other files later on.):

Expand All @@ -75,7 +75,7 @@ export function cellStyle(params){
### Format the columns
Now insert this function into some of the column selections.

1. Open the file **ALM\client\src\routes\sourced-trades\loans-manager\loans.column.defs.ts**.
1. Open the file `ALM\client\src\routes\sourced-trades\loans-manager\loans.column.defs.ts`.

2. To include this new function add the following import statement to the top of the file:

Expand Down Expand Up @@ -106,7 +106,7 @@ The `PAYMENT_AMOUNT` section should now look like this:
cellStyle: (params) => cellStyle(params),
},
```
5. Make similar changes in the file **ALM\client\src\routes\sourced-trades\c-ds-manager\c-ds.column.defs.ts**.
5. Make similar changes in the file `ALM\client\src\routes\sourced-trades\c-ds-manager\c-ds.column.defs.ts`.

Adjust the import statement and add the same line to `DEPOSIT_AMOUNT` and `MATURITY_AMOUNT`:

Expand All @@ -129,7 +129,7 @@ import { cellStyle } from '../../../utils/util-formatters';
### Format the positions grid
We can also add this function to the positions grid.

1. Open the file **ALM\client\src\routes\fx-blotter\position-grid\position.gridOptions.ts**.
1. Open the file `ALM\client\src\routes\fx-blotter\position-grid\position.gridOptions.ts`.

2. Add the import statement in the same way as you did before:

Expand All @@ -154,9 +154,9 @@ The block should look like this:
## Improving the Trade Entry/Modify pop ups
By default, the trade entry screens in our application are displayed in a vertical list. When we have many fields, this can be difficult to navigate. We can change this through the template.

1. In the folder **ALM\client\src\routes\fx-blotter\fx-trades-manager\`, adjust the forms for creating and updating an FX Trade.
1. In the folder `ALM\client\src\routes\fx-blotter\fx-trades-manager\`, adjust the forms for creating and updating an FX Trade.

Edit both **fx-trades.create.form.schema.ts** and **fx-trades.update.form.schema.ts**, replacing `"type": "VerticalLayout",` with:
Edit both `fx-trades.create.form.schema.ts` and `fx-trades.update.form.schema.ts`, replacing `"type": "VerticalLayout",` with:

```jsx
"type": "LayoutVertical2Columns",
Expand All @@ -175,7 +175,7 @@ This class will subscribe to the new `ALL_POSITIONS` stream. It will transform t

It will also dynamically update the column definitions on the grid so that there is a column for each currency.

1. Create your new custom element in a new file: **client/src/components/positions-grid.ts**. Add the content below.
1. Create your new custom element in a new file: `client/src/components/positions-grid.ts`. Add the content below.

```jsx
import { customElement, FASTElement, html, ref } from '@microsoft/fast-element';
Expand Down Expand Up @@ -297,7 +297,7 @@ export class PositionsGrid extends FASTElement {
}
```
2. Add your new custom element to the **client/src/components/components.ts**.
2. Add your new custom element to the `client/src/components/components.ts`.
This ensures that the browser knows how to render it. To do this, add two lines to the top of the file, as shown below:
Expand Down Expand Up @@ -325,7 +325,7 @@ PositionsGrid;

```
3. Update your route template in **client/src/routes/fx-blotter/fx-blotter.template.ts**; find the `rapid-layout-item` for `Position`:
3. Update your route template in `client/src/routes/fx-blotter/fx-blotter.template.ts`; find the `rapid-layout-item` for `Position`:
```jsx
<rapid-layout-item title="Position">
Expand Down Expand Up @@ -356,17 +356,17 @@ FxBlotterRatesGrid;
PositionsGrid;
```
This will use the positions grid we added in the new **positions-grid.ts** file.
This will use the positions grid we added in the new `positions-grid.ts` file.
## Adding a new chart
We won't be inputting loan data until we deal with [data from external sources](/how-to/alm-app/ht-alm-ingesting-external/). However, it would be useful to set up currency conversion on the loan pie chart so that it displays all data in a single currency, in this case GBP.
We'll do this using the `FX_RATE` table that we created.
### Update the back end
1. Go to the back-end code, inside **ALM/server**. We need to add a new view to provide data for this chart.
1. Go to the back-end code, inside `ALM/server`. We need to add a new view to provide data for this chart.
2. Open the file **ALM\server\ALM-app\src\main\genesis\cfg\ALM-view-dictionary.kts**.
2. Open the file `ALM\server\ALM-app\src\main\genesis\cfg\ALM-view-dictionary.kts`.
3. Add the code below, which defines a view joining `LOAN_TRADE` to the latest `FX_RATE`.
Expand All @@ -391,7 +391,7 @@ We'll do this using the `FX_RATE` table that we created.
}
}
```
4. In the file **ALM\server\ALM-app\src\main\genesis\scripts\ALM-dataserver.kts**, add a new query to towards the end of the file. This enables the front end to query this data.
4. In the file `ALM\server\ALM-app\src\main\genesis\scripts\ALM-dataserver.kts`, add a new query to towards the end of the file. This enables the front end to query this data.
```jsx
query("LOAN_PAYMENTS_GBP", LOAN_PAYMENTS_GBP) {
Expand All @@ -404,9 +404,9 @@ We'll do this using the `FX_RATE` table that we created.
```
### Update the front end
1. Go to the front-end code inside **ALM\client**.
1. Go to the front-end code inside `ALM\client`.
2. Open the file **ALM\client\src\routes\sourced-trades\sourced-trades.template.ts** and find the following section:
2. Open the file `ALM\client\src\routes\sourced-trades\sourced-trades.template.ts` and find the following section:
```jsx
Expand All @@ -419,7 +419,7 @@ We'll do this using the `FX_RATE` table that we created.
<rapid-layout-item title="Loans by Client - GBP">
```
4. In the file **ALM\client\src\routes\sourced-trades\loans-by-client-chart\loans-by-client.template.ts**, adjust the `chart-datasource` to use the new data server and field:
4. In the file `ALM\client\src\routes\sourced-trades\loans-by-client-chart\loans-by-client.template.ts`, adjust the `chart-datasource` to use the new data server and field:
```jsx
<chart-datasource
Expand All @@ -428,7 +428,7 @@ We'll do this using the `FX_RATE` table that we created.
></chart-datasource>
```
5. In the file **ALM\client\src\routes\sourced-trades\sourced-trades.template.ts**, add a third chart, showing GBP Equivalent currency exposure from the loans. To do this, add this `rapid layout item` between the loan chart `rapid layout item` and the CD chart `rapid layout item`:
5. In the file `ALM\client\src\routes\sourced-trades\sourced-trades.template.ts`, add a third chart, showing GBP Equivalent currency exposure from the loans. To do this, add this `rapid layout item` between the loan chart `rapid layout item` and the CD chart `rapid layout item`:
```jsx
<rapid-layout-item title="Loans by Currency - GBP Equivalent">
Expand Down Expand Up @@ -463,4 +463,4 @@ Then close the region at the end of the Rates `rapid-layout-item` block:
:::info Checking your work
You can view a final version of the code for the ALM app, including all the modifications outlined in this guide, in the [ALM app repository](https://github.com/genesiscommunitysuccess/alm-app).
:::
:::
Loading

0 comments on commit 77faa51

Please sign in to comment.