0

I get the following error when I run the code below. 'Field or property "Title" does not exist. undefined'

Anyone know why that is? The Title field does exist.

I'm also using Vue.js

<head>
    <script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>    
    <script type="text/javascript" src="_layouts/15/sp.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.6/vue.min.js"></script>  
</head>

<body>

<div id="app">
{{ test }}
  <table width="100%" border="1">
    <tr>
      <td>Department of Veterans Affairs</td>
      <td></td>
      <td>Memorandum</td>      
    </tr>
    <tr>
      <td colspan="2">Date:</td>     
      <td></td>
    </tr>
    <tr>
      <td colspan="2">From:</td>     
      <td></td>
    </tr>  
    <tr>
      <td colspan="2">Subj:</td>     
      <td></td>
    </tr>    
    <tr>
      <td colspan="2">To:</td>     
      <td></td>
    </tr>    
    <tr>
      <td colspan="3">In accordance with....</td>  
    </tr>   
    <tr>
      <td colspan="3">
        <table border="1" width="100%">
          <tr>
                <td colspan="2">1.</td>     
                <td>This memorandum has been prepared .....to support:</td>
          </tr>
          <tr>
                <td colspan="3">
                  <textarea rows="4" cols="150" v-model="guidance1">

                  </textarea>
                </td>
          </tr>
          <tr>
                <td colspan="2">2.</td>     
                <td>This memorandum has been prepared .....to support:</td>
          </tr>
          <tr>
                <td colspan="3">
                  <textarea rows="4" cols="150" v-model="guidance2">

                  </textarea>
                </td>
          </tr>
          <tr>
                <td colspan="2">3.</td>     
                <td>This memorandum has been prepared .....to support:</td>
          </tr>
          <tr>
                <td colspan="3">
                  <textarea rows="4" cols="150" v-model="guidance3">

                  </textarea>
                </td>
          </tr>
          <tr>
                <td colspan="2">4.</td>     
                <td>This memorandum has been prepared .....to support:</td>
          </tr>
          <tr>
                <td colspan="3">
                  <textarea rows="4" cols="150" v-model="guidance4">

                  </textarea>
                </td>
          </tr>
          <tr>
                <td colspan="2">5.</td>     
                <td>This memorandum has been prepared .....to support:</td>
          </tr>
          <tr>
                <td colspan="3">
                  <textarea rows="4" cols="150" v-model="guidance5">

                  </textarea>
                </td>
          </tr>          
        </table>
      </td>
    </tr>
    <tr>
      <td colspan="3">Supervisory Review:&nbsp;&nbsp;&nbsp;  ______Approved&nbsp;&nbsp;&nbsp;______Denied</td>
    </tr>
    <tr>
      <td colspan="3">Signature:__________________________________<br />*For completion by Chief or Assistant Director</td>
    </tr>   
    <tr>
      <td colspan="3">Final Approval:&nbsp;&nbsp;&nbsp;  ______Approved&nbsp;&nbsp;&nbsp;______Denied</td>
    </tr>    
    <tr>
      <td colspan="3">Signature:__________________________________<br />*For completion by Chief or Assistant Director</td>
    </tr>    
  <tr>
    <td colspan="3"><button value="Save" @click.prevent="submitForm">Submit</button>&nbsp;<button type="button">Print</button></td>
  </tr>

  </table>
</div>

</body>
<script type="text/javascript" src="/demo/webparts/pdf/travelMemo_2.js"></script>




new Vue({
  el:"#app",
  data: {
    Title: '',
    from: '',
    Subj:'',
    To: '',
    guidance1:'',
    guidance2:'',
    guidance3:'',
    guidance4:'',
    guidance5:'',
    test: 'Hello World'     
  },
  methods: {
    submitForm: function() {
    alert("HELLO");
        var clientContext = new SP.ClientContext();
        var oList = clientContext.get_web().get_lists().getByTitle('Travel Request Memos');

        var itemCreateInfo =  new SP.ListItemCreationInformation();
        var oListItem = oList.addItem(itemCreateInfo);
        oListItem.set_item('Title', 'Title field');
        oListItem.set_item('From', 'from field');
        oListItem.set_item('Subj', 'subject field');
        oListItem.set_item('To', 'to field');
        oListItem.set_item('Guidance1', this.guidance1);
        oListItem.set_item('Guidance2', this.guidance2);
        oListItem.set_item('Guidance3', this.guidance3);
        oListItem.set_item('Guidance4', this.guidance4);
        oListItem.set_item('Guidance5', this.guidance5);  

    clientContext.load(oListItem);

    clientContext.executeQueryAsync(this.onAddSucceeded, this.onAddFailed);
  },
  onAddSucceeded: function(){
   alert("Item added");
  },
  onAddFailed: function(sender, args) {   
    alert(args.get_message() + '\n' + args.get_stackTrace());  
  }                                         
    }
})
0

The internal name of the Title column is not always "Title". Which list template was used to create your list?

To find the internal name: Go to the list's properties page, in the Columns section, click your column's name. Check the end of the browser's URL to see the internal name.

For example, Created By is "Author".

...}&Field=Author
  • It says 'Title' _layouts/15/FldEdit.aspx?List=%7BBD6BB27D-4B03-4DF9-BFEE-16079F8A9C27%7D&Field=Title – OLA Apr 6 at 1:26
  • Here's the weird part. As I comment out each set_item() line 1 by 1, the same error shows referencing each column – OLA Apr 6 at 1:30
0

Your clientContext object does not have a URL.

var clientContext = new SP.ClientContext( yourSiteUrl );

or if running in a SharePoint page:

var clientContext = SP.ClientContext.get_current();

Otherwise, your code looks nearly identical to here: https://docs.microsoft.com/en-us/previous-versions/office/developer/sharepoint-2010/hh185011(v=office.14)

I don't know anything about the Vue.js library, so I can't help you there.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.