Skip to content

GenerateWebresource

Niels Steenbeek edited this page Mar 17, 2023 · 5 revisions

CLI Command generate Webresource [name]

Command

hso-d365 generate Webresource [name] [--template Template] 
# Type Template: 'React' | 'HTML'

Description

CLI Command 'generate Webresource [name]' generates a Webresource. Via a prompt a template can be choosen:

  • HTML
  • React

An entry will be added for the webpack.config.js file.

Generated files

Following files will be generated:

  1. src/[name]/[name].html
  2. src/[name]/[name].scss
  3. src/[name]/[name].ts

HTML template [name].ts

This is the root file. The onLoad function is the starting point for the code. The Xrm.GlobalContext is passed as parameter.

import './[name].scss';

class [name] {
    public static onLoad(globalContext: Xrm.GlobalContext): void {
        // code here
    }
}

export function onLoad(): void {
    const globalContext = Xrm.Utility.getGlobalContext();
    Webresource.onLoad(globalContext);
}

React template [name].ts using State hook

import ReactDom from 'react-dom';
import './[name].scss';
import {Translation} from '../translation/Translation';

// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface [name]Props {}

// eslint-disable-next-line no-unused-vars,max-lines-per-function
const [name]: React.FC<WebresourceProps> = (props: [name]Props): JSX.Element => {
    const [testBoolean, setTestBoolean] = useState(false);

    // eslint-disable-next-line max-lines-per-function
    return (
        <>
            <span>{Translation.translate('Language')}</span>
        </>
    );
};
export default [name];

export function onLoad(): void {
    const rootDiv = document.getElementById('[name]');
    ReactDom.render(<[name]/>, rootDiv);
}

Help

Use command

hso-d365 generate Webresource --help