Step 8
The list component will render a bootstrap table, based on the selected view.
<template>
<Navbar
brand="Dashboard"
:items="items"
:searchBox="searchBox"
:type="navbarType"
/>
</template>
<script src="./navigation.ts"></script>- Search Box
- We will use the change and search events to update the search text in the store.
- Items
- New Item - Will redirect to the item view
- The rest are dummy links for this example
- The help menu will have a code example for display a form in a modal dialog
import { Components, Helper } from "gd-sprest-bs";
import { Navbar } from "gd-sprest-bs-vue";
import Vue from "vue";
import { Views } from "../router";
export default Vue.extend({
components: { Navbar },
data() {
return {
navbarType: Components.NavbarTypes.Primary,
searchBox: {
hideButton: true,
value: this.$store.state.searchText,
onChange: value => {
// Update the search property
this.$store.commit("setSearch", value);
},
onSearch: value => {
// Update the search property
this.$store.commit("setSearch", value);
}
},
items: [
{
text: "New Item",
onClick: () => {
// Show the new form
Views.Item(0);
}
},
{
text: "Reports",
onClick: () => { }
},
{
text: "Administration",
onClick: () => { }
},
{
text: "Help",
items: [
{
text: "Common Questions",
href: "#"
},
{
text: "How To",
href: "#"
},
{
text: "Contact",
href: "#"
}
],
onClick: (item, ev) => {
// Prevent postback
ev.preventDefault();
// Display the page in a modal
Helper.SP.ModalDialog.showModalDialog({
showMaximized: true,
title: item.text,
url: item.href
});
}
}
]
}
}
});