0
import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { escape } from '@microsoft/sp-lodash-subset';
import  './ThoughtforthedayWebPart.module.scss';
import * as strings from 'ThoughtforthedayWebPartStrings';

import MockHttpClient from './MockHttpClient';
import { 
  SPHttpClientResponse,
  SPHttpClient,
  SPHttpClientConfiguration, 
   ISPHttpClientOptions,
} from '@microsoft/sp-http';
import {  
  Environment,  
  EnvironmentType  
} from '@microsoft/sp-core-library';
 import * as $ from 'jquery';
 import 'jquery';

export interface ISPLists {  
  value: ISPList[];  
} 

export interface ISPList {  
  Title: string;  
  Quote: string;  

} 


export default class ThoughtforthedayWebPart extends BaseClientSideWebPart<IThoughtforthedayWebPartStrings> {


  public _getListData() {
    var today = new Date();
    var Startdate = today.toISOString().substring(0, 10) + "T00:00:00.000Z";
    var Enddate = today.toISOString().substring(0, 10) + "T23:00:00.000Z";
    var filterQuery = "?$top=1&$filter=Created  le datetime'" + Enddate + "' and Created ge datetime'" + Startdate + "'";
    $.ajax({
       url: encodeURI(this.context.pageContext.web.absoluteUrl + "/_api/web/lists/getbytitle('Thoughtfortheday')/items" + filterQuery),
       type: "GET",
       headers: {
           "Accept": "application/json; odata=verbose",
           "Content-Type": "application/json;odata=verbose",
       },
// tslint:disable-next-line: no-function-expression
       success: function (data) {
          var allData = data.d.results;
          var datalen = data.d.results.length;
          if (datalen == 0) {
             console.log("No records available for today's date");
          }
          else {
             console.log("Available Record:", allData);
          }
       },
// tslint:disable-next-line: no-function-expression
       error: function (err) {
          console.log(JSON.stringify(err));
       }
    });
 }



  private _renderList(items: ISPList[]): void {  
    let html: string = '<table class="TFtable" border=1 width=100% style="border-collapse: collapse;">';  

    items.forEach((item: ISPList) => {  
      html += `  

        <div align="center">  ${item.Quote}</div>
          <div align="right"> ${'-'}  ${item.Title}</div> 

          `;  
    });  
    html += `</table>`;  
    const listContainer: Element = this.domElement.querySelector('#spListContainer');  
    listContainer.innerHTML = html;  
  } 

  public render(): void {  
    this.domElement.innerHTML = `  
    <div class="thoughtfortheday}">  
  <div class="container">  
   <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white row}">  
     <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">    
     </div>  
   </div>  
   <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white row}">  
   <div style="background-color:Black;color:white;text-align: center;font-weight: bold;font-size:18px;">Thought for the day</div>  
   <br>  
  <div id="spListContainer" />  
   </div>  
  </div>  
  </div>`;  
  this._renderListAsync();  
  }
  public _renderListAsync() {
    throw new Error("Method not implemented.");
  }



  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

This is my code please check and revert me back

  • please share what error you are getting? – Siddharth Vaghasia Jun 26 '19 at 8:43
  • your code is not making sense, what are you trying to do? _renderListAsync why it is through exception? why is _getListData never called? – Siddharth Vaghasia Jun 26 '19 at 8:45
1

Your code will be like this:

import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './TestWebPart.module.scss';
import * as strings from 'TestWebPartStrings';
import * as $ from 'jquery';
export interface ITestWebPartProps {
  description: string;
}

export default class TestWebPart extends BaseClientSideWebPart<ITestWebPartProps> {

  public render(): void {
    this._getListData();
    this.domElement.innerHTML = `
      <div class="${ styles.test}" id="tableData"></div>`;
  }


  public _getListData() {
    var today = new Date();
    var Startdate = today.toISOString().substring(0, 10) + "T00:00:00.000Z";
    var Enddate = today.toISOString().substring(0, 10) + "T23:00:00.000Z";
    var dynamicHtml = "<table border=1 width=100% style='border-collapse: collapse;'><tr><th>ID</th><th>Title</th>"
    var filterQuery = "?$top=1&$filter=Created  le datetime'" + Enddate + "' and Created ge datetime'" + Startdate + "'";
    $.ajax({
      url: encodeURI(this.context.pageContext.web.absoluteUrl + "/_api/web/lists/getbytitle('T1')/items" + filterQuery),
      type: "GET",
      headers: {
        "Accept": "application/json; odata=verbose",
        "Content-Type": "application/json;odata=verbose",
      },
      success: function (data) {
        //in query top=1 so it will return only 1 value so will directly use [0] item
        var allData = data.d.results[0];
        var datalen = data.d.results.length;
        if (datalen == 0) {
          dynamicHtml += "<tr>";
          dynamicHtml += "<td  colspan='2' style='text-align: center;'>Record not found.</td>";
          dynamicHtml += "</tr>";
          dynamicHtml += "</table>";
          $("#tableData").html(dynamicHtml);
        }
        else {
          dynamicHtml += "<tr>";
          dynamicHtml += "<td style='text-align: center;'>" + allData.ID + "</td>";
          dynamicHtml += "<td style='text-align: center;'>" + allData.Title + "</td>";
          dynamicHtml += "</tr>";
          dynamicHtml += "</table>";
          $("#tableData").html(dynamicHtml);
        }
      },
      error: function (err) {
        console.log(JSON.stringify(err));
      }
    })
  }



  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

If record is available then output like this: Found Image

If record is not available then output like this: Not Found Image

Regards,
Chandani Prajapati

| improve this answer | |

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.