Struсture API usage | Viseven Help Center

Use the struсture API to access the e-Detailer struсture in raw format.

The struсture API has the following methods:

• getRaw

• getSlides

• getFlatSlides

• getVisibleSlides

• getFlatVisibleSlides

• getHiddenSlides

• getFlatHiddenSlides

• getArchivedSlides

• getSlide

• getFlatSlide

• getChapters

• getChapter

• getStartSlide

• getStoryboard

• getStruсtureFileVersion

getRaw

You can use the getRaw method to get the e-Detailer struсture:

• The names and order of chapters

• The names and templates of slides

• The storyboard length

beforeMount() {
    const structure = this.$structure.getRaw()
    console.log(structure)
},

You can use the struсture API method to get the specific object from the struсture.json file. For example, use this.$struсture.getRaw().chapters to get only the chapters struсture.

beforeMount() {
    const chapters = this.$structure.getRaw().chapters
    console.log(chapters)
}

getSlides

You can use the getSlides method to get an array of nested slide data from struсture.json:

• The chapter it belongs to

• The subslides it has, whether it's visible or hidden

For example, to view the slides data in the browser console, add the following to the index.vue file of an e-Detailer slide:

<!-- ./slides/[SLIDE_ID]/index.vue -->

<script>
export default {
  mounted() {
    console.log(this.$structure.getSlides());
  },
};
</script>

As a result, you can view the data of each slide in the browser console:

getFlatSlides

You can use the getFlatSlides method to get an array with flat slide data from struсture.json:

• The chapter it belongs to

• The subslides it has, whether it's visible or hidden

For example, to view the slides data in the browser console, add the following to the index.vue file of an e-Detailer slide:

<!-- ./slides/[SLIDE_ID]/index.vue -->

<script>
export default {
  mounted() {
    console.log(this.$structure.getFlatSlides());
  },
};
</script>

As a result, you can view the data of each slide in the browser console:

getVisibleSlides

Use the getVisibleSlides method to get nested data of all visible slides. Hidden and archived slides are not shown as a result.

For example, the e-Detailer has the following struсture, where slide1 is visible and slide2 is hidden, because it doesn't belong to a chapter:

// ./structure.json

{
  "slides": {
    "slide1": {
      "name": "slide1",
      "template": "slides/default/index.vue"
    },
    "slide2": {
      "name": "slide2",
      "template": "slides/slide2/index.vue"
    }
  },
  "chapters": {
    "main": {
      "name": "Template chapter",
      "content": [
        "slide1"
      ]
    }
  },
  "storyboard": [
    "main"
  ]
}

To view the data for all the visible slides in the browser console, add the following to the index.vue file of an e-Detailer slide:

<!-- ./slides/[SLIDE_ID]/index.vue -->

<script>
export default {
  mounted() {
    console.log(this.$structure.getVisibleSlides());
  },
};
</script>

As a result, only slide1 is shown in the console. The type field indicates that the slide is visible.

getFlatVisibleSlides

Use the getFlatVisibleSlides method to get flat data of all visible slides. Hidden and archived slides are not shown as a result.

For example, the e-Detailer has the following struсture, where slide1 is visible and slide2 is hidden, because it doesn't belong to a chapter:

// ./structure.json

{
  "slides": {
    "slide1": {
      "name": "slide1",
      "template": "slides/default/index.vue"
    },
    "slide2": {
      "name": "slide2",
      "template": "slides/slide2/index.vue"
    }
  },
  "chapters": {
    "main": {
      "name": "Template chapter",
      "content": [
        "slide1"
      ]
    }
  },
  "storyboard": [
    "main"
  ]
}

To view the data for all the visible slides in the browser console, add the following to the index.vue file of an e-Detailer slide:

<!-- ./slides/[SLIDE_ID]/index.vue -->

<script>
export default {
  mounted() {
    console.log(this.$structure.getFlatVisibleSlides());
  },
};
</script>

As a result, only slide1 is shown in the console. The type field indicates that the slide is visible.

getHiddenSlides

Use the getHiddenSlides method to get nested data of all hidden slides. The method doesn't retrieve visible and archived slides.

For example, the e-Detailer has the following struсture, where slide1 is visible, slide2 is archived, and slide3 is hidden:

// ./structure.json

{
  "structureFileVersion": 2,
  "slides": {
    "slide1": {
      "name": "Brand page",
      "template": "slides/slide1/index.vue"
    },
    "slide2": {
      "name": "Canvas",
      "template": "slides/slide2/index.vue"
    },
    "slide3": {
      "name": "Interactive input",
      "template": "slides/slide3/index.vue"
    }
  },
  "chapters": {
    "home": {
      "name": "Home",
      "content": [
        "slide1",
        {
          "slide": "slide3",
          "hidden": true
        }
      ]
    }
  },
  "storyboard": [
    "potential",
    {
      "chapter": "problems"
    }
  ],
  "archivedSlides": [
    {
      "slide": "slide2",
      "chapter": "home"
    }
  ]
}

To view the data for all the hidden slides in the browser console, add the following to the index.vue file of an e-Detailer slide:

<!-- ./slides/[SLIDE_ID]/index.vue -->

<script>
export default {
  mounted() {
    console.log(this.$structure.getHiddenSlides());
  },
};
</script>

As a result, only slide3 is shown in the console. The type field indicates that the slide is hidden.

getFlatHiddenSlides

Use the getFlatHiddenSlides method to get flat data of all hidden slides. The method doesn't retrieve visible and archived slides.

For example, the e-Detailer has the following struсture, where slide1 is visible, slide2 is archived, and slide3 is hidden:

// ./structure.json

{
  "structureFileVersion": 2,
  "slides": {
    "slide1": {
      "name": "Brand page",
      "template": "slides/slide1/index.vue"
    },
    "slide2": {
      "name": "Canvas",
      "template": "slides/slide2/index.vue"
    },
    "slide3": {
      "name": "Interactive input",
      "template": "slides/slide3/index.vue"
    }
  },
  "chapters": {
    "home": {
      "name": "Home",
      "content": [
        "slide1",
        {
          "slide": "slide3",
          "hidden": true
        }
      ]
    }
  },
  "storyboard": [
    "potential",
    {
      "chapter": "problems"
    }
  ],
  "archivedSlides": [
    {
      "slide": "slide2",
      "chapter": "home"
    }
  ]
}

To view the data for all the hidden slides in the browser console, add the following to the index.vue file of an e-Detailer slide:

<!-- ./slides/[SLIDE_ID]/index.vue -->

<script>
export default {
  mounted() {
    console.log(this.$structure.getHiddenSlides());
  },
};
</script>

As a result, only slide3 is shown in the console. The type field indicates that the slide is hidden.

getArchivedSlides

Use the getArchivedSlides method to get nested data of all archived slides. The method doesn't retrieve visible and hidden slides.

For example, the e-Detailer has the following struсture, where slide1 is visible, slide2 is archived, and slide3 is hidden:

// ./structure.json

{
  "structureFileVersion": 2,
  "slides": {
    "slide1": {
      "name": "Brand page",
      "template": "slides/slide1/index.vue"
    },
    "slide2": {
      "name": "Canvas",
      "template": "slides/slide2/index.vue"
    },
    "slide3": {
      "name": "Interactive input",
      "template": "slides/slide3/index.vue"
    }
  },
  "chapters": {
    "home": {
      "name": "Home",
      "content": [
        "slide1",
        {
          "slide": "slide3",
          "hidden": true
        }
      ]
    }
  },
  "storyboard": [
    "potential",
    {
      "chapter": "problems"
    }
  ],
  "archivedSlides": [
    {
      "slide": "slide2",
      "chapter": "home"
    }
  ]
}

To view the data for all the archived slides in the browser console, add the following to the index.vue file of an e-Detailer slide:

<!-- ./slides/[SLIDE_ID]/index.vue -->

<script>
export default {
  mounted() {
    console.log(this.$structure.getArchivedSlides());
  },
};
</script>

As a result, only slide2 is shown in the console. The type field indicates that the slide is archived.

getSlide

Use the getSlide method to get nested data of a specific slide. The method retrieves data for visible, hidden, and archived slides.

For example, the e-Detailer has the following struсture where the default slide is visible, and slide2 is hidden:

// ./structure.json

{
  "slides": {
    "default": {
      "name": "Template slide",
      "template": "slides/default/index.vue"
    },
    "slide2": {
      "name": "slide2",
      "template": "slides/slide2/index.vue"
    }
  },
  "chapters": {
    "main": {
      "name": "Template chapter",
      "content": [
        "default",
        "!slide2"
      ]
    }
  },
  "storyboard": [
    "main"
  ]
}

To view the data for the default slide in the browser console, add the following to the index.vue file of an e-Detailer slide:

<!-- ./slides/[SLIDE_ID]/index.vue -->

<script>
export default {
  mounted() {
    console.log(this.$structure.getSlide('default'));
  },
};
</script>

getFlatSlide

Use the getFlatSlide method to get flat data of a specific slide. The method retrieves data for visible, hidden, and archived slides.

For example, the e-Detailer has the following struсture, where the default slide is visible, and slide2 is hidden:

// ./structure.json

{
  "slides": {
    "default": {
      "name": "Template slide",
      "template": "slides/default/index.vue"
    },
    "slide2": {
      "name": "slide2",
      "template": "slides/slide2/index.vue"
    }
  },
  "chapters": {
    "main": {
      "name": "Template chapter",
      "content": [
        "default",
        "!slide2"
      ]
    }
  },
  "storyboard": [
    "main"
  ]
}

To view the data for slide2 in the browser console, add the following to the index.vue file of an e-Detailer slide:

<!-- ./slides/[SLIDE_ID]/index.vue -->

<script>
export default {
  mounted() {
    console.log(this.$structure.getFlatSlide('slide2'));
  },
};
</script>

getChapters

Use the getChapters method to get nested data of all chapters in the struсture.json file. The method retrieves data for visible, hidden, and archived chapters.

For example, the e-Detailer has three chapters, the visible main chapter, the hidden chapter2, and the archived chapter3, not present in the storyboard:

// ./structure.json

{
  "storyboard": [
    "main",
    "!chapter2"
  ]
}

To view the chapter data in the browser console, add the following to the index.vue file of an e-Detailer slide:

<!-- ./slides/[SLIDE_ID]/index.vue -->

<script>
export default {
  mounted() {
    console.log(this.$structure.getChapters());
  },
};
</script>

The type field indicates if the chapter is visible, hidden, or archived.

getHiddenChapters

Use the getHiddenChapters method to get nested data of all hidden chapters in the struсture.json file. The method doesn't retrieve data for visible and archived chapters.

For example, the e-Detailer has three chapters, the visible main chapter, the hidden chapter2, and the archived chapter3, not present in the storyboard:

// ./structure.json

{
  "storyboard": [
    "main",
    "!chapter2"
  ]
}

To view the chapter data in the browser console, add the following to the index.vue file of an e-Detailer slide:

<!-- ./slides/[SLIDE_ID]/index.vue -->

<script>
export default {
  mounted() {
    console.log(this.$structure.getHiddenChapters());
  },
};
</script>

The type field indicates that the chapter is hidden.

getVisibleChapters

Use the getVisibleChapters method to get nested data of all visible chapters in the struсture.json file. The method doesn't retrieve hidden and archived chapters.

For example, the e-Detailer has three chapters, the visible main chapter, the hidden chapter2, and the archived chapter3, not present in the storyboard:

// ./structure.json

{
  "storyboard": [
    "main",
    "!chapter2"
  ]
}

To view the chapter data in the browser console, add the following to the index.vue file of an e-Detailer slide:

<!-- ./slides/[SLIDE_ID]/index.vue -->

<script>
export default {
  mounted() {
    console.log(this.$structure.getVisibleChapters());
  },
};
</script>

The type field indicates that the chapter is visible.

getChapter

Use the getChapter method to get data about a specific chapter in the struсture.json file. The method retrieves visible, hidden, and archived chapters.

For example, the e-Detailer has two chapters, the visible main chapter and the hidden chapter2:

// ./structure.json

{
  "storyboard": [
    "main",
    {
      "chapter": "chapter2",
      "hidden": true
    },
  ]
}

To view the main chapter data in the browser console, add the following to the index.vue file of an e-Detailer slide:

<!-- ./slides/[SLIDE_ID]/index.vue -->

<script>
export default {
  mounted() {
    console.log(this.$structure.getChapter('main'));
  },
};
</script>

The type field indicates if the chapter is visible, hidden, or archived.

getChapterSlides

Use the getChapterSlides method to get data about all slides of a specific chapter. The method retrieves visible, hidden, and archived slides.

For example, the main chapter has a visible default slide, and a hidden slide2:

// ./structure.json

{
  "structureFileVersion": 2,
  ...
  "chapters": {
    "main": {
      "name": "Main",
      "content": [
        "default",
        {
          "slide": "slide2",
          "hidden": true
        }
      ]
    }
  }
}

To view the slides of the main chapter in the browser console, add the following to the index.vue file of an e-Detailer slide:

<!-- ./slides/[SLIDE_ID]/index.vue -->

<script>
export default {
  mounted() {
    console.log(this.$structure.getChapterSlides('main'));
  },
};
</script>

The type field indicates if the chapter is visible, hidden, or archived.

getSlideSubslides

Use the getSlideSubslides method to get data about all subslides of a specific slide. The method retrieves visible, hidden, and archived subslides.

For example, the default slide has a visible slide5, and a hidden slide6:

// ./structure.json

{
{
  "structureFileVersion": 2,
  ...
  "chapters": {
    "main": {
      "name": "Main",
      "content": [
        {
          "slide": "default",
            "subslides": [
              "slide5",
              {
                "slide": "slide6",
                "hidden": "true"
              }
        }
      ]
    }
  }
}

To view the subslides of the default slide in the browser console, add the following to the index.vue file of an e-Detailer slide:

<!-- ./slides/[SLIDE_ID]/index.vue -->

<script>
export default {
  mounted() {
    console.log(this.$structure.getSlideSubslides('default'));
  },
};
</script>

The type field indicates if the chapter is visible, hidden, or archived.

getStartSlide

Use the getStartSlide method to get the data about the starting slide. The method retrieves the slide from the start object of the struсture.json file. If the start object isn't defined, the method retrieves the first visible slide from the first chapter.

For example, the start object has the default slide from the main chapter:

// ./structure.json

"start": {
    "slide": "default",
    "chapter": "main"
}

To view the data of the start object in the browser console, add the following to the index.vue file of an e-Detailer slide:

<!-- ./slides/[SLIDE_ID]/index.vue -->

<script>
export default {
  mounted() {
    console.log(this.$structure.getStartSlide());
  },
};
</script>

getStoryboard

Use the getStoryboard method to get data about all the chapters that belong to the storyboard.

For example, an e-Detailer with the following struсture:

{
  "chapters": {
    "main": {
      "name": "Template Chapter",
      "content": [
        "default",
        "slide2"
      ]
    },
    "chapter2": {
      "name": "my chapter",
      "content": [
        "!slide3"
      ]
    }
  },
  "storyboard": [
    "main",
    "!chapter2"
  ]
}

To view the storyboard data in the browser console, add the following to the index.vue file of an e-Detailer slide:

<!-- ./slides/[SLIDE_ID]/index.vue -->

<script>
export default {
  mounted() {
    console.log(this.$structure.getStoryboard());
  },
};
</script>

As a result, you can view all the chapters from the storyboard. You can also see the data of each slide that belongs to a chapter from the storyboard.

getStruсtureFileVersion

Use the getStruсtureFileVersion method to get the data about the struсture.json file version.

To view the version of the struсture.json file in the browser console, add the following to the index.vue file of an e-Detailer slide:

<!-- ./slides/[SLIDE_ID]/index.vue -->

<script>
export default {
  mounted() {
    console.log(this.$structure.getStructureFileVersion());
  },
};
</script>

As a result, you can see the version of the struсture.json file: 1 or 2.

getStructureFileVersion response example