Vuetify Expansion Panel in SharePoint

Posted May 29, 2019 by Isaac Sogunro

I have had the pleasure of doing a lot with the VUE.js framework and I have created tons of videos on using Vue.js with SharePoint. I recently created a video on using Vuetify with SharePoint. Vuetify is a ‘Material Design Component Framework’ made for VUE. Check out the UI components. There are a plethora of components that can be leveraged and used in SharePoint. Here’s a video on using the ‘Expansion Panel‘ I created recently. Below is the code used in the video:

	<head>
	<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>

	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900\|Material+Icons" />
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" />
	</head>

	<body>
	<div id="app">

	<v-app id="inspire">
	<v-expansion-panel inset focusable>
	<v-expansion-panel-content lazy
	v-for="(item,i) in expansion"
	:key="i"
	>
	<template v-slot:header>
	<div>{{item.Title}}</div>
	</template>
	<v-card>
	<v-card-text>{{item.Details}}</v-card-text>
	</v-card>
	</v-expansion-panel-content>
	</v-expansion-panel>
	</v-app>
	</div>
	<script type="text/javascript" src="/sites/demos/mdemos/webpart/expansion/expansionPanel.js"></script>

view raw expansion.html hosted with ❤ by GitHub

      
        new Vue({
      
            el:"#app",
      
            data: {
      
                expansion: []
      
            },
      
            created: function(){
      
                this.getListData();
      
            },
      
            methods: {
      
                getListData: function(){
      
                    var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('expansion list')/items";
      
                    var vm = this;
      
                    axios.get(endPointUrl).then(function(response){
      
                        vm.expansion = response.data.value;
      
                    })
      
                    .catch(function(error){
      
                        console.log(error);
      
                    })
      
                    .then(function(){
      
                        console.log("Always executes")
      
                    })
      
                }
      
            }
      
        })

view raw expansion.js hosted with ❤ by GitHub

SharePoint 2013 Expansion panel SharePoint Online Vue.js Vuetify

	Isaac Sogunro on Using Vuejs in SharePoint
	Ben Segarra on Using Vuejs in SharePoint
	Ben Segarra on Using Vuejs in SharePoint
	Isaac Sogunro on Using Vuejs in SharePoint
	Ben Segarra on Using Vuejs in SharePoint

Optimal Training Group

Vuetify Expansion Panel in SharePoint

Isaac Sogunro View All →

Leave a Reply Cancel reply

Recent Posts

Recent Comments

Archives

Categories

Meta

	new Vue({
	el:"#app",
	data: {
	expansion: []
	},
	created: function(){
	this.getListData();
	},
	methods: {
	getListData: function(){
	var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('expansion list')/items";

	var vm = this;
	axios.get(endPointUrl).then(function(response){
	vm.expansion = response.data.value;
	})
	.catch(function(error){
	console.log(error);
	})
	.then(function(){
	console.log("Always executes")
	})
	}
	}
	})

Share this:

Like this:

Related

Isaac Sogunro View All →

Leave a Reply Cancel reply