Skip to content

Commit

Permalink
Fix documentation formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@folkforms
folkforms committed Apr 23, 2024
1 parent 3fc8dae commit f710861
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 56 deletions.
24 changes: 11 additions & 13 deletions cookbook/src/pages/setup.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,22 @@ description: Setting up your development environment
2. Download and install your IDE. Microsoft Visual Studio Code [https://code.visualstudio.com/download](https://code.visualstudio.com/download) is the recommended IDE. Install any needed extensions, such as ESLint or Prettier.
3. Download the `main` branch of the SPM UI Addon Development Environment code from [https://github.com/merative/spm-ui-addon-devenv](https://github.com/merative/spm-ui-addon-devenv).

You can choose one of the following options:
You can choose one of the following options:

1. Download as Zip. Select the Code drop-down menu and select the **Download Zip** option.
2. Open with GitHub Desktop.
3. Clone the repository.
If you have Git set up, you can clone the repository by opening a command prompt and running the command:
1. Download as Zip. Select the Code drop-down menu and select the **Download Zip** option.
2. Open with GitHub Desktop.
3. Clone the repository. If you have Git set up, you can clone the repository by opening a command prompt and running the command:

```
git clone https://github.com/merative/spm-ui-addon-devenv.git
```
```
git clone https://github.com/merative/spm-ui-addon-devenv.git
```

4. Install the SPM UI Addon Development Environment on your computer by using npm. To install the code, change to the `spm-ui-addon-devenv` directory and run the command:

```
npm ci
```
```
npm ci
```

5. You can now open the repository in your IDE. For example, Microsoft Visual Studio Code.

6. Configure your React development environment variables. Before you start to work with React components, you must set node environment variables in the `.env` file.
Update the `.env` file, which sets the environment variables for production builds. For information about the enviroment variables to set in these files, see [Environment variables](environment-variables).
6. Configure your React development environment variables. Before you start to work with React components, you must set node environment variables in the `.env` file. Update the `.env` file, which sets the environment variables for production builds. For information about the enviroment variables to set in these files, see [Environment variables](environment-variables).
83 changes: 40 additions & 43 deletions cookbook/src/pages/spm-uim-integration.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,48 +12,45 @@ Complete the following steps to integrate the component into a Java renderer:
1. Create a custom UIM page in your web client custom components directory.
2. Create a Java renderer in the web client custom component directory. Refer to the PersonFolio and Logo samples for guidance, see [Samples reference](samples-reference).

- For this example, create the `CarbonComponentXViewRenderer.java` Java renderer in the `JavaSource/custom` subdirectory. The renderer extends the
`AbstractViewRenderer`` (curam.util.client.domain.render.view.AbstractViewRenderer) class.
- Make a call to the `includeCarbonComponent()` function to call the custom component. For more information about the `includeCarbonComponent()` function, see the the Java documentation. Call the following code from the `render()` method:
```
// making the call to integrate the ComponentX component into the renderer via
// the ComponentXRenderer JavaScript renderer function
includeCarbonComponent(context, carbonWrapperDivID, labels, "{}",
"window.spmcustom.renderers.ComponentX.ComponentXRenderer",
map);
```

```
You can specify the following code variables as optional configuration:
```

// labels to be used to pass translated labels into the carbon component.
final String labels = "{}";
// the id of the HTML element on the renderer that will host the HTML content from the Carbon component
final String carbonWrapperDivID = "ComponentX";
// map can be used for extra configuration that may be needed, such as passing argument to GraphQL queries
final Map<String, String> map = new HashMap<String, String>();

```
```
- For this example, create the `CarbonComponentXViewRenderer.java` Java renderer in the `JavaSource/custom` subdirectory. The renderer extends the
`AbstractViewRenderer`` (curam.util.client.domain.render.view.AbstractViewRenderer) class.
- Make a call to the `includeCarbonComponent()` function to call the custom component. For more information about the `includeCarbonComponent()` function, see the the Java documentation. Call the following code from the `render()` method:

```
// making the call to integrate the ComponentX component into the renderer via
// the ComponentXRenderer JavaScript renderer function
includeCarbonComponent(context, carbonWrapperDivID, labels, "{}",
"window.spmcustom.renderers.ComponentX.ComponentXRenderer",
map);
```

You can specify the following code variables as optional configuration:

```
// labels to be used to pass translated labels into the carbon component.
final String labels = "{}";
// the id of the HTML element on the renderer that will host the HTML content from the Carbon component
final String carbonWrapperDivID = "ComponentX";
// map can be used for extra configuration that may be needed, such as passing argument to GraphQL queries
final Map<String, String> map = new HashMap<String, String>();
```

3. Configure your Java renderer by doing the following:

- On the server, create a `CUSTOM_CARBON_COMPONENT_X` domain definition for your custom component in the the `EJBServer` custom component directory. For more information about configuring domain definitions see [https://www.ibm.com/docs/en/spm/8.0.2?topic=workflow-configuring-domain-definition ](https://www.ibm.com/docs/en/spm/8.0.2?topic=workflow-configuring-domain-definition).
- Update the `DomainsConfig.xml` file in your custom component in the webclient directory to map the new domain definition to the new Java renderer. If this file does not exist in your custom component, you must create it. For example:
```
<?xml version="1.0" encoding="ISO-8859-1"?>
<dc:domains xmlns:dc="http://www.curamsoftware.com/curam/util/common/domain-config">
<dc:domain name="CUSTOM_CARBON_COMPONENT_X">
<dc:plug-in name="view-renderer"
class="custom.CarbonComponentXViewRenderer"/>
</dc:domain>
</dc:domains>
```
- In the renderer, create a HTML element to host the output from the Carbon component. This HTML element must have the `spm-custom-component` CSS class name. For example:

```
<div id="<someId>" class="spm-custom-component">
```
- On the server, create a `CUSTOM_CARBON_COMPONENT_X` domain definition for your custom component in the the `EJBServer` custom component directory. For more information about configuring domain definitions see [https://www.ibm.com/docs/en/spm/8.0.2?topic=workflow-configuring-domain-definition](https://www.ibm.com/docs/en/spm/8.0.2?topic=workflow-configuring-domain-definition).
- Update the `DomainsConfig.xml` file in your custom component in the webclient directory to map the new domain definition to the new Java renderer. If this file does not exist in your custom component, you must create it. For example:

```
<?xml version="1.0" encoding="ISO-8859-1"?>
<dc:domains xmlns:dc="http://www.curamsoftware.com/curam/util/common/domain-config">
<dc:domain name="CUSTOM_CARBON_COMPONENT_X">
<dc:plug-in name="view-renderer"
class="custom.CarbonComponentXViewRenderer"/>
</dc:domain>
</dc:domains>
```

4. In the renderer, create a HTML element to host the output from the Carbon component. This HTML element must have the `spm-custom-component` CSS class name. For example:

```
<div id="<someId>" class="spm-custom-component">
```

0 comments on commit f710861

Please sign in to comment.