MODDINGWIKI Developers General Adding a main page

This is using the Mount & Blade 2: Bannerlord extension as an example.

A main page is a view in the main content area of Vortex. These pages can be created for an extension by registering a main page and specifing how and when it is displayed. A customized version of React Bootstrap is used to build the front end controls.

This pages can be for all of Vortex or for a specific extension, this is determined by the visible property in the options object when you are registering the main page.

Registering

Use the context.registerMainPage() method inside of main() to register a main page.

context.registerMainPage('savegame', 'Saves', SaveList, {
    id: 'bannerlord-saves',
    hotkey: 'A',
    group: 'per-game',
    visible: () => {
      if (context.api.store === undefined) {
        return false;
      }
      return selectors.activeGameId(context.api.store.getState()) === GAME_ID;
    },
    props: () => ({
      context: context,
      t: context.api.translate,
      launcherManager: launcherManager,
    }),
  });

Reference

registerMainPage(icon: string, title: string, element: React.ComponentType<any>, options: IMainPageOptions)

| --- | --- | --- | | icon | string | Icon to display in the side menu. Choose from this list | title | string | Text to display in the side menu | element | React.ComponentType<any> | Everything necessary to render this page. Normally in a seperate class as the pages can get quite complicated with custom code and this helps to seperate everything that is involved in this page | options | IMadePageOptions | Options for how this page is displayed

element: React.ComponentType<any>

Provides everything necessary to render this page. Normally in seperate file and class. ComponentEx extends React.Component to add support for the i18n (localisation) library

class SaveList extends ComponentEx<IComponentProps, IComponentState> {

options: IMadePageOptions

| --- | --- | --- | | group |string| Choose from dashboard, global, per-game, support, hidden. TODO| | id | string |(Optional) ID for this page. If none is specified the page title is used. Use the id to avoid name collisions if another extension is already using the same title.| |hotkey| string | (Optional) A hotkey to be pressed together with Ctrl+Shift to open that page| |hotkeyRaw| string | (Optional) A hotkey to be pressed to open that page. In this case the caller has to specify any modifiers in the format required by Electron.| |priority| number | (Optional) TODO |badge| ReduxProp<any> | (Optional) TODO |activity| ReduxProp<boolean> | (Optional) TODO |visible| () => boolean | (Optional) Function that returns a boolean to determine when this page is visible. In the example above, it's only visible if the active game matches the extension. |props| () => any | (Optional) Function that returns an object that is passed to the constructor of the element class specified when registering a main page. Forms part of the React props object |onReset| method | (Optional) TODO