SharePoint Saturday Charlotte 8/10/19

I had the opportunity to lead a SharePoint session today at SP Saturday Charlotte. The topic was using VUE.js with SharePoint. I promised that I would provide the code and the codepen I Shared.

Codepen: https://codepen.io/isogunro/pen/aeRNZL

The help desk code on Gist can be found at this blog post from a previous SP Saturday I did.

expansion.html & expansion.js
<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>
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")
            })
        }
    }
})

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.