Informatics People - SharePoint developer: 2020

Friday, November 20, 2020

C#- AI-Programming

using Microsoft.Office.Core;

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Configuration;

using System.Data;

using System.Drawing;

using System.IO;

using System.Linq;

using System.Runtime.InteropServices;

using System.Speech.Recognition;

using System.Speech.Synthesis;

using System.Text;

using System.Threading.Tasks;

using System.Windows.Forms;

namespace CTestEBoard

{

public partial class Form1 : Form

{ // Create a new SpeechRecognitionEngine instance.

SpeechRecognitionEngine sre = new SpeechRecognitionEngine(new System.Globalization.CultureInfo("en-US"));

SpeechSynthesizer s = new SpeechSynthesizer();

Choices list = new Choices();

public void say(string h)

{

s.Speak(h);

}

private void rec_SpeachRecognized(object sender, SpeechRecognizedEventArgs e)

{

String r = e.Result.Text;

//what you say

if (r == "hello")

{

// what it says

say("hi");

}

//what you say

if (r == "Please exit the window")

{

// what it says

say("Great, !");

this.Close();

}

public Form1()

{

SpeechRecognitionEngine rec = new SpeechRecognitionEngine();

list.Add(new String[] { "hello", "Please exit the window" });

Grammar gr = new Grammar(new GrammarBuilder(list));

try

{

rec.RequestRecognizerUpdate();

rec.LoadGrammar(gr);

rec.SpeechRecognized += rec_SpeachRecognized;

rec.SetInputToDefaultAudioDevice();

rec.RecognizeAsync(RecognizeMode.Multiple);

}

catch { return; }

s.SelectVoiceByHints(VoiceGender.Female);

s.Speak("Welcome to Production, Excellence Board");

InitializeComponent();

}

Monday, November 16, 2020

Global variable undefined inside function - SPfx

Arrow functions, things are special/different. Arrow Functions always lexically bind the context (Lexical Scoping means that it uses this from the code that contains the Arrow Function.) and therefore this will refer to the originating context, ie the class.

  A simpler example might make it more clear.
  
  const obj = {
    myVar: 'foo',
    myFunc: function() { 
      console.log('Actual Variable value: ',this.myVar)  
  
      setTimeout(() => {
        console.log('Set timeout using Arrow function: ',this.myVar)
      }, 1000);
      setTimeout(function () {
        console.log('Set timeout using Normal function: ',this.myVar)
      }, 1000);
    }
  }
  obj.myFunc();
  Output
  
  Actual Variable value: foo
  Set timeout using Arrow function:  foo
  Set timeout using Normal function:  undefined

Sunday, November 15, 2020

SPFx - insertBulkItem

private insertBulkItem(elements: any[]): Promise<any> {
  return new Promise((resolve, reject) => {

    if (elements.length > 0) {
      // get first element of the array
      const element = elements[0];
      // remove the first element of the array
      elements.shift();
      pnp.sp.web.lists.getByTitle('Test').items.add(element).then(response => {
        console.log('then...', response);
        // call function again (first element removed before)
        return this.insertBulkItem(elements);
      }).catch(error => {
        console.log('catch...', error);
        reject(error);
      });
    } else {
      // no (more) items in array
      resolve(null);
    }

  });

}

 // elements to add
    // with EXACTLY the columns to set in SharePoint
    const elements = [
      {
        Title: 'el1',
      },
      {
        Title: 'el2',
      },
      {
        Title: 'el3',
      },
    ];

    // add all the elements ordered
    this.insertBulkItem(elements).then(response => {
      // all added correctly
      // do some stuff ...
      console.log('success');
    }).catch(error => {
      // some error happened at some point...
      // handle the error ...
      console.log('something went wrong');
    });


option with async and await
// call function
this.insertBulkItem(elements);

// async function with await
private async insertBulkItem(elements: any[]) {
  for (const element of elements) {
    await pnp.sp.web.lists.getByTitle('Test').items.add(element);
  }
}

Friday, November 13, 2020

SPFx File upload control OnChange Event

 <div class="col-md-4 pt-3  text-right">
      <span class="uploadlink2 mouse_hover">                                                                            
         <label for="apfsFile" class="custom-file-upload">Upload File</label>
             <input style="display:none" type="file" id="FileInputId"  />
          </span>
 </div>

 var input = document.getElementById('FileInputId');
// This is only called when the input value
// is changed via the DOM, not when its changed
// programmatically using input.value
input.onchange = (e) => {  this.UploadFile(e);}

  public UploadFile(event: Event): void {
    if ((event.target as HTMLInputElement).files && (event.target as HTMLInputElement).files.length) {
      //dosomething
    }
  }

Wednesday, November 11, 2020

SPFx get current url and current user and load master data

pnp.sp.site.getWebUrlFromPageUrl(window.location.href)

      .then(res => {
        this.absoluteUrl = res;
        pnp.sp.web.currentUser.get().then(result => {
          this.CurntUserId = result.Id;
          this.CurntUserEmail = result.Email;
          this.CurntUserTitle = result.Title;
          this.SubmittedBy = result.Title;
          //inital querter
          this.MonthTitle = this.getQuarter(new Date()).toString();
          this.MonthNumber = this.getQuarter(new Date()).toString();
          //bind master data
          this.LoadAllMasterData();
          var queryReqId = new UrlQueryParameterCollection(window.location.href);
          if (queryReqId != null && queryReqId != undefined) {
            if (queryReqId.getValue("ReqId") != undefined) {
              this.loadDataLS(queryReqId.getValue("ReqId"));
            }
            else {
              this.getUniqueNumber();
            }
          }

        });
      });

Monday, November 2, 2020

Multi select Dropdown - jQuery Plugin -Example

Save as html browse and check dropdown

<!doctype html>

<html>

<head>

<style>

.multi-select-container {

display: inline-block;

position: relative;

}

.multi-select-menu {

position: absolute;

left: 0;

top: 0.8em;

z-index: 1;

float: left;

min-width: 100%;

background: #fff;

margin: 1em 0;

border: 1px solid #aaa;

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

display: none;

}

.multi-select-menuitem {

display: block;

font-size: 0.875em;

padding: 0.6em 1em 0.6em 30px;

white-space: nowrap;

}

.multi-select-menuitem--titled:before {

display: block;

font-weight: bold;

content: attr(data-group-title);

margin: 0 0 0.25em -20px;

}

.multi-select-menuitem--titledsr:before {

display: block;

font-weight: bold;

content: attr(data-group-title);

border: 0;

clip: rect(0 0 0 0);

height: 1px;

margin: -1px;

overflow: hidden;

padding: 0;

position: absolute;

width: 1px;

}

.multi-select-menuitem + .multi-select-menuitem {

padding-top: 0;

}

.multi-select-presets {

border-bottom: 1px solid #ddd;

}

.multi-select-menuitem input {

position: absolute;

margin-top: 0.25em;

margin-left: -20px;

}

.multi-select-button {

display: inline-block;

font-size: 0.875em;

padding: 0.2em 0.6em;

max-width: 16em;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

vertical-align: -0.5em;

background-color: #fff;

border: 1px solid #aaa;

border-radius: 4px;

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

cursor: default;

}

.multi-select-button:after {

content: "";

display: inline-block;

width: 0;

height: 0;

border-style: solid;

border-width: 0.4em 0.4em 0 0.4em;

border-color: #999 transparent transparent transparent;

margin-left: 0.4em;

vertical-align: 0.1em;

}

.multi-select-container--open .multi-select-menu {

display: block;

}

.multi-select-container--open .multi-select-button:after {

border-width: 0 0.4em 0.4em 0.4em;

border-color: transparent transparent #999 transparent;

}

.multi-select-container--positioned .multi-select-menu {

/* Avoid border/padding on menu messing with JavaScript width calculation */

box-sizing: border-box;

}

.multi-select-container--positioned .multi-select-menu label {

/* Allow labels to line wrap when menu is artificially narrowed */

white-space: normal;

}

</style>

</head>

<body>

<h5>jQuery multi-select.js Plugin Examples</h5>

<label for="people">Select people:</label>

<option value="alice">Alice</option>

<option value="carol">Carol</option>

</select>

</form>

</div>

$(function () {

$('#people').multiSelect();

});

</script>

// jquery.multi-select.js

// by mySociety

// https://github.com/mysociety/jquery-multi-select

; (function ($) {

"use strict";

var pluginName = "multiSelect",

defaults = {

'containerHTML': '<div class="multi-select-container">',

'menuHTML': '<div class="multi-select-menu">',

'buttonHTML': '<span class="multi-select-button">',

'menuItemsHTML': '<div class="multi-select-menuitems">',

'menuItemHTML': '<label class="multi-select-menuitem">',

'presetsHTML': '<div class="multi-select-presets">',

'modalHTML': undefined,

'menuItemTitleClass': 'multi-select-menuitem--titled',

'activeClass': 'multi-select-container--open',

'noneText': '-- Select --',

'allText': undefined,

'presets': undefined,

'positionedMenuClass': 'multi-select-container--positioned',

'positionMenuWithin': undefined,

'viewportBottomGutter': 20,

'menuMinHeight': 200

};

/**

* @constructor

function MultiSelect(element, options) {

this.element = element;

this.$element = $(element);

this.settings = $.extend({}, defaults, options);

this._defaults = defaults;

this._name = pluginName;

this.init();

}

function arraysAreEqual(array1, array2) {

if (array1.length != array2.length) {

return false;

}

array1.sort();

array2.sort();

for (var i = 0; i < array1.length; i++) {

if (array1[i] !== array2[i]) {

return false;

}

return true;

}

$.extend(MultiSelect.prototype, {

init: function () {

this.checkSuitableInput();

this.findLabels();

this.constructContainer();

this.constructButton();

this.constructMenu();

this.constructModal();

this.setUpBodyClickListener();

this.setUpLabelsClickListener();

this.$element.hide();

checkSuitableInput: function (text) {

if (this.$element.is('select[multiple]') === false) {

throw new Error('$.multiSelect only works on <select multiple> elements');

}

findLabels: function () {

this.$labels = $('label[for="' + this.$element.attr('id') + '"]');

constructContainer: function () {

this.$container = $(this.settings['containerHTML']);

this.$element.data('multi-select-container', this.$container);

this.$container.insertAfter(this.$element);

constructButton: function () {

var _this = this;

this.$button = $(this.settings['buttonHTML']);

this.$button.attr({

'role': 'button',

'aria-haspopup': 'true',

'tabindex': 0,

'aria-label': this.$labels.eq(0).text()

})

.on('keydown.multiselect', function (e) {

var key = e.which;

var returnKey = 13;

var escapeKey = 27;

var spaceKey = 32;

var downArrow = 40;

if ((key === returnKey) || (key === spaceKey)) {

e.preventDefault();

_this.$button.click();

} else if (key === downArrow) {

e.preventDefault();

_this.menuShow();

var group = _this.$presets || _this.$menuItems;

group.children(":first").focus();

} else if (key === escapeKey) {

_this.menuHide();

}

}).on('click.multiselect', function (e) {

_this.menuToggle();

})

.appendTo(this.$container);

this.$element.on('change.multiselect', function () {

_this.updateButtonContents();

});

this.updateButtonContents();

updateButtonContents: function () {

var _this = this;

var options = [];

var selected = [];

this.$element.find('option').each(function () {

var text = /** @type string */ ($(this).text());

options.push(text);

if ($(this).is(':selected')) {

selected.push($.trim(text));

}

});

this.$button.empty();

if (selected.length == 0) {

this.$button.text(this.settings['noneText']);

} else if ((selected.length === options.length) && this.settings['allText']) {

this.$button.text(this.settings['allText']);

} else {

this.$button.text(selected.join(', '));

}

constructMenu: function () {

var _this = this;

this.$menu = $(this.settings['menuHTML']);

this.$menu.attr({

'role': 'menu'

}).on('keyup.multiselect', function (e) {

var key = e.which;

var escapeKey = 27;

if (key === escapeKey) {

_this.menuHide();

_this.$button.focus();

}

})

.appendTo(this.$container);

this.constructMenuItems();

if (this.settings['presets']) {

this.constructPresets();

}

constructMenuItems: function () {

var _this = this;

this.$menuItems = $(this.settings['menuItemsHTML']);

this.$menu.append(this.$menuItems);

this.$element.on('change.multiselect', function (e, internal) {

// Don't need to update the menu items if this

// change event was fired by our tickbox handler.

if (internal !== true) {

_this.updateMenuItems();

}

});

this.updateMenuItems();

updateMenuItems: function () {

var _this = this;

this.$menuItems.empty();

this.$element.children('optgroup,option').each(function (index, element) {

var $item;

if (element.nodeName === 'OPTION') {

$item = _this.constructMenuItem($(element), index);

_this.$menuItems.append($item);

} else {

_this.constructMenuItemsGroup($(element), index);

}

});

upDown: function (type, e) {

var key = e.which;

var upArrow = 38;

var downArrow = 40;

if (key === upArrow) {

e.preventDefault();

var prev = $(e.currentTarget).prev();

if (prev.length) {

prev.focus();

} else if (this.$presets && type === 'menuitem') {

this.$presets.children(':last').focus();

} else {

this.$button.focus();

}

} else if (key === downArrow) {

e.preventDefault();

var next = $(e.currentTarget).next();

if (next.length || type === 'menuitem') {

next.focus();

} else {

this.$menuItems.children(':first').focus();

}

constructPresets: function () {

var _this = this;

this.$presets = $(this.settings['presetsHTML']);

this.$menu.prepend(this.$presets);

$.each(this.settings['presets'], function (i, preset) {

var unique_id = _this.$element.attr('name') + '_preset_' + i;

var $item = $(_this.settings['menuItemHTML'])

.attr({

'for': unique_id,

'role': 'menuitem'

})

.text(' ' + preset.name)

.on('keydown.multiselect', _this.upDown.bind(_this, 'preset'))

.appendTo(_this.$presets);

var $input = $('<input>')

.attr({

'type': 'radio',

'name': _this.$element.attr('name') + '_presets',

'id': unique_id

})

.prependTo($item);

$input.on('change.multiselect', function () {

_this.$element.val(preset.options);

_this.$element.trigger('change');

});

this.$element.on('change.multiselect', function () {

_this.updatePresets();

});

this.updatePresets();

updatePresets: function () {

var _this = this;

$.each(this.settings['presets'], function (i, preset) {

var unique_id = _this.$element.attr('name') + '_preset_' + i;

var $input = _this.$presets.find('#' + unique_id);

if (arraysAreEqual(preset.options || [], _this.$element.val() || [])) {

$input.prop('checked', true);

} else {

$input.prop('checked', false);

}

});

constructMenuItemsGroup: function ($optgroup, optgroup_index) {

var _this = this;

$optgroup.children('option').each(function (option_index, option) {

var $item = _this.constructMenuItem($(option), optgroup_index + '_' + option_index);

var cls = _this.settings['menuItemTitleClass'];

if (option_index !== 0) {

cls += 'sr';

}

$item.addClass(cls).attr('data-group-title', $optgroup.attr('label'));

_this.$menuItems.append($item);

});

constructMenuItem: function ($option, option_index) {

var unique_id = this.$element.attr('name') + '_' + option_index;

var $item = $(this.settings['menuItemHTML'])

.attr({

'for': unique_id,

'role': 'menuitem'

})

.on('keydown.multiselect', this.upDown.bind(this, 'menuitem'))

.text(' ' + $option.text());

var $input = $('<input>')

.attr({

'type': 'checkbox',

'id': unique_id,

'value': $option.val()

})

.prependTo($item);

if ($option.is(':disabled')) {

$input.attr('disabled', 'disabled');

}

if ($option.is(':selected')) {

$input.prop('checked', 'checked');

}

$input.on('change.multiselect', function () {

if ($(this).prop('checked')) {

$option.prop('selected', true);

} else {

$option.prop('selected', false);

}

// .prop() on its own doesn't generate a change event.

// Other plugins might want to do stuff onChange.

$option.trigger('change', [true]);

});

return $item;

constructModal: function () {

var _this = this;

if (this.settings['modalHTML']) {

this.$modal = $(this.settings['modalHTML']);

this.$modal.on('click.multiselect', function () {

_this.menuHide();

})

this.$modal.insertBefore(this.$menu);

}

setUpBodyClickListener: function () {

var _this = this;

// Hide the $menu when you click outside of it.

$('html').on('click.multiselect', function () {

_this.menuHide();

});

// Stop click events from inside the $button or $menu from

// bubbling up to the body and closing the menu!

this.$container.on('click.multiselect', function (e) {

e.stopPropagation();

});

setUpLabelsClickListener: function () {

var _this = this;

this.$labels.on('click.multiselect', function (e) {

e.preventDefault();

e.stopPropagation();

_this.menuToggle();

});

menuShow: function () {

$('html').trigger('click.multiselect'); // Close any other open menus

this.$container.addClass(this.settings['activeClass']);

if (this.settings['positionMenuWithin'] && this.settings['positionMenuWithin'] instanceof $) {

var menuLeftEdge = this.$menu.offset().left + this.$menu.outerWidth();

var withinLeftEdge = this.settings['positionMenuWithin'].offset().left +

this.settings['positionMenuWithin'].outerWidth();

if (menuLeftEdge > withinLeftEdge) {

this.$menu.css('width', (withinLeftEdge - this.$menu.offset().left));

this.$container.addClass(this.settings['positionedMenuClass']);

}

var menuBottom = this.$menu.offset().top + this.$menu.outerHeight();

var viewportBottom = $(window).scrollTop() + $(window).height();

if (menuBottom > viewportBottom - this.settings['viewportBottomGutter']) {

this.$menu.css({

'maxHeight': Math.max(

viewportBottom - this.settings['viewportBottomGutter'] - this.$menu.offset().top,

this.settings['menuMinHeight']

'overflow': 'scroll'

});

} else {

this.$menu.css({

'maxHeight': '',

'overflow': ''

});

}

menuHide: function () {

this.$container.removeClass(this.settings['activeClass']);

this.$container.removeClass(this.settings['positionedMenuClass']);

this.$menu.css('width', 'auto');

menuToggle: function () {

if (this.$container.hasClass(this.settings['activeClass'])) {

this.menuHide();

} else {

this.menuShow();

}

});

$.fn[pluginName] = function (options) {

return this.each(function () {

if (!$.data(this, "plugin_" + pluginName)) {

$.data(this, "plugin_" + pluginName,

new MultiSelect(this, options));

}

});

};

})(jQuery);

</script>

</body>

</html>

Search This Blog

Friday, November 20, 2020

C#- AI-Programming

Monday, November 16, 2020

Global variable undefined inside function - SPfx

Sunday, November 15, 2020

SPFx - insertBulkItem

Friday, November 13, 2020

SPFx File upload control OnChange Event

Wednesday, November 11, 2020

SPFx get current url and current user and load master data

Monday, November 2, 2020

Multi select Dropdown - jQuery Plugin -Example