Portfolio structure

Your portfolio structure—structure.json—defines what's included in the portfolio and how the nested e-Detailers are arranged.

{
  // The list of all nested e-Detailers included in your portfolio
  "edetailers": {
    "my-e-detailer-1": {
      "name": "my-e-detailer-1-xxxxx",
      "path": "./edetailers/my-e-detailer-1-xxxxx"
    },
    "my-e-detailer-2": {
      "name": "my-e-detailer-2-xxxxy",
      "path": "./edetailers/my-e-detailer-2-xxxxx"
    },
    "my-e-detailer-3": {
      "name": "my-e-detailer-3-xxxxx",
      "path": "./edetailers/my-e-detailer-3-xxxxx"
    }
  },
  // The list of active e-Detailers
  "portfolio": [
    "my-e-detailer-1-xxxxx",
    "my-e-detailer-2-xxxxx"
  ],
  // The e-Detailer to be demonstrated first
  "start": {
    "edetailer": "my-e-detailer-1-xxxxx"
  }
}

Key	Description
edetailers	A list of all e-Detailers included in the portfolio.
portfolio	A list of active e-Detailers to be actually demonstrated in the portfolio. e-Detailers are listed in the order of their demonstration. The first e-Detailer in this list is used as a starting e-Detailer unless any other is defined under the start key.
start	The starting e-Detailer ID. This e-Detailer is shown first when opening the portfolio index.html. Optional. When no e-Detailer ID is specified here, the first e-Detailer under the portfolio key is shown by default.

The .ewizard/settings.json file contains the content item type definition.

{
  "content": {
    "type": "edetailer",
    "subtype": "portfolio"
  }
}

The settings.json file includes brand information, localization settings, your portfolio ID, and navigation parameters.

{
  "information": {
    // The list of brands the nested e-Detailers are designed for
    "brands": [
      {
        "id": "forteris-xxxxx",
        "name": "Forteris"
      }
    ]
  },
  "localization": {
    "country": "Global",
    "current": "eng",
    "original": "eng"
  },
  // Your portfolio ID
  "id": "my-portfolio-xxxxx",
  // Portfolio navigation settings
  "navigation": {
    "swipe": {
      "edetailer": {
        "direction": "vertical",
        "touchesCount": 1,
        "enabled": true
      }
    }
  }
}

Key	Description
brands	IDs of brands nested e-Detailers are designed for
localization	Localization parameters
id	Your portfolio ID
navigation	Navigation parameters

Navigation between e-Detailers

You can implement various navigation patterns within your portfolio:

• Direct jumps to specific e-Detailers and slides
• Sequential navigation between e-Detailers

For this, use the v-goto directive with wiz-button components as follows:

• Navigate to the first slide of the presentation with a unique ID in the portfolio structure foo:

    <wiz-button v-goto.tap="{ edetailer: 'foo' }"></wiz-button>

• Navigate to the slide with ID bar in the e-Detailer with a unique ID in the portfolio structure foo:

      <wiz-button v-goto.tap="{ edetailer: 'foo', slide: 'bar' }"></wiz-button>

• Navigate to the previous and next e-Detailer in the portfolio structure.
  For this, pass $prev or $next as the e-Detailer ID. For example, to navigate to the next e-Detailer on button click:

      <wiz-button v-goto.tap="{ edetailer: '$next', slide: 'bar' }"></wiz-button>

In older versions of eWizard.js, the portfolio-navigator module overrides the goTo, resolveGoToOptions, and validateNavigationOptions methods in the content navigator to ensure proper functionality for the goTo method.