Documentshttps://community.progress.com/community_groups/openedge_kendo_ui_builder/m/documentsen-USTelligent Community 8Using the this keyword in JavaScripthttps://community.progress.com/community_groups/openedge_kendo_ui_builder/m/documents/3380Tue, 10 Oct 2017 20:51:56 GMT22f5d987-ac14-4752-a665-ea95672bc1fb:0f66135a-6bae-433e-bd9f-f9b6703bfd76Shelley Chase0<p>In the generated web app you will often see the statement &quot;<strong>that = this;</strong>&quot;. Within functions in JavaScript, the value of <strong>this</strong> might change so it is recommended to keep assign a var the original value of this when a function executes.&nbsp;</p>
<p class="entry-title">An explanation can be found on the web page,&nbsp;<strong>Everything you wanted to know about JavaScript scope</strong> by&nbsp;Todd Motto. In the article he says:</p>
<p class="entry-title" style="margin-left:30px;">Each scope binds a different value of&nbsp;<code class="highlighter-rouge">this</code>&nbsp;depending on how the function is invoked. We&rsquo;ve all used the&nbsp;<code class="highlighter-rouge">this</code>&nbsp;keyword, but not all of us understand it and how it differs when invoked. By default&nbsp;<code class="highlighter-rouge">this</code>&nbsp;refers to the outer most global object, the&nbsp;<code class="highlighter-rouge">window</code>.&nbsp;</p>
<p style="margin-left:30px;">We can easily show how invoking functions in different ways binds the&nbsp;<code class="highlighter-rouge">this</code>&nbsp;value differently:</p>
<p class="entry-title" style="margin-left:30px;"></p>
<pre style="margin-left:30px;"><code class="language-javascript">var myFunction = function () {
console.log(this); // this = global, [object Window]
};
myFunction();
var myObject = {};
myObject.myMethod = function () {
console.log(this); // this = Object { myObject }
};
var nav = document.querySelector(&#39;.nav&#39;); // &lt;nav class=&quot;nav&quot;&gt;
var toggleNav = function () {
console.log(this); // this = &lt;nav&gt; element
};
nav.addEventListener(&#39;click&#39;, toggleNav, false);</code></pre>
<p></p>
<p style="margin-left:30px;"></p>
<p style="margin-left:30px;">There are also problems that we run into when dealing with the&nbsp;<code class="highlighter-rouge">this</code>&nbsp;value, for instance if I do this, even inside the same function the scope can be changed and the&nbsp;<code class="highlighter-rouge">this</code>&nbsp;value can be changed:</p>
<p class="entry-title" style="margin-left:30px;"></p>
<pre style="margin-left:30px;"><code class="language-javascript">var nav = document.querySelector(&#39;.nav&#39;); // &lt;nav class=&quot;nav&quot;&gt;
var toggleNav = function () {
console.log(this); // &lt;nav&gt; element
setTimeout(function () {
console.log(this); // [object Window]
}, 1000);
};
nav.addEventListener(&#39;click&#39;, toggleNav, false);</code></pre>
<p></p>
<p style="margin-left:30px;"></p>
<p style="margin-left:30px;">So what&rsquo;s happened here? We&rsquo;ve created new scope which is not invoked from our event handler, so it defaults to the&nbsp;<code class="highlighter-rouge">window</code>&nbsp;Object as expected. There are several things we can do if we want to access the proper&nbsp;<code class="highlighter-rouge">this</code>&nbsp;value which isn&rsquo;t affected by the new scope. You might have seen this before, where we can cache a reference to the&nbsp;<code class="highlighter-rouge">this</code>&nbsp;value using a&nbsp;<code class="highlighter-rouge">that</code>&nbsp;variable and refer to the lexical binding:</p>
<p class="entry-title" style="margin-left:30px;"></p>
<pre style="margin-left:30px;"><code class="language-javascript">var nav = document.querySelector(&#39;.nav&#39;); // &lt;nav class=&quot;nav&quot;&gt;
var toggleNav = function () {
var that = this;
console.log(that); // &lt;nav&gt; element
setTimeout(function () {
console.log(that); // &lt;nav&gt; element
}, 1000);
};
nav.addEventListener(&#39;click&#39;, toggleNav, false);</code></pre>
<p></p>
<p style="margin-left:30px;"></p>
<p style="margin-left:30px;">This is a neat little trick to be able to use the proper&nbsp;<code class="highlighter-rouge">this</code>&nbsp;value and resolve problems with newly created scope.</p>
<p>For more information please refer to the full article.</p>Kendo UI Builder KUIB AngularJS this FAQKendo UI Builder KUIB AngularJS this FAQCreating an OpenEdge ABL Service using OpenEdge 11.7.0https://community.progress.com/community_groups/openedge_kendo_ui_builder/m/documents/3363Fri, 25 Aug 2017 23:26:56 GMT22f5d987-ac14-4752-a665-ea95672bc1fb:c43d751c-3f69-4888-9092-5d6b251e4d65Anil Kumar0<p>The process of creating an ABL Service in Progress Developer Studio has been enhanced in OpenEdge 11.7.0</p>
<p>This document provides list of different steps involved in creating an ABL service using OpenEdge 11.7.0 environment.</p>Sample App: Custom AngularJS Module and Service in Kendo UI Builder 2.0https://community.progress.com/community_groups/openedge_kendo_ui_builder/m/documents/3361Thu, 24 Aug 2017 01:12:48 GMT22f5d987-ac14-4752-a665-ea95672bc1fb:8d5048a8-d306-4179-b7f1-4a70a3bf8900egarcia0<p>Kendo UI Builder 2.0 provides an extensions folder where AngularJS can be added.</p>
<p>The attached sample uses this support to define custom high level APIs.</p>
<p>See the following wiki article for a description on how to use the functionality:</p>
<p><a href="/community_groups/openedge_kendo_ui_builder/w/openedgekendouibuilder/2924.how-to-add-a-custom-module-and-service-in-kendo-ui-builder-2-0">https://community.progress.com/community_groups/openedge_kendo_ui_builder/w/openedgekendouibuilder/2924.how-to-add-a-custom-module-and-service-in-kendo-ui-builder-2-0</a><a href="/community_groups/openedge_kendo_ui_builder/w/openedgekendouibuilder/2924.how-to-add-a-custom-module-and-service-in-kendo-ui-builder-2-0"></a></p>
<p>Specifically, the sample AngularJS service provides an API to easily add a DropDownList component to a column in a Kendo UI Grid to provide related data. A Grid template is used to show the related data when in display mode.</p>
<p>The grid in the following screenshot uses the API for the State and SalesRep columns.</p>
<p><a href="/cfs-file/__key/galleryfiles/00-00-00-02-19/grid_2D00_ddl.png"><img src="/resized-image/__size/1100x960/__key/galleryfiles/00-00-00-02-19/grid_2D00_ddl.png" alt=" " /></a></p>
Kendo UI Builder KUIB AngularJSKendo UI Builder KUIB AngularJSOpenEdge.BusinessLogic.pl Updatehttps://community.progress.com/community_groups/openedge_kendo_ui_builder/m/documents/3183Mon, 19 Dec 2016 17:11:45 GMT22f5d987-ac14-4752-a665-ea95672bc1fb:33b4bf2d-4c16-42a0-86ba-462376a95c3eegarcia0<p>The attached Procedure Library file contains the base Business Entity used by the Kendo UI Builder for OpenEdge and also mobile support in OpenEdge (JSDO).</p>
<p>If you see the following error while performing an update, you would need to update the base Business Entity class:<br /> Unable to call SAVE-ROW-CHANGES(). Failed to create query for BEFORE-TABLE. (7211)<br /> <br />You can update this class by installing the attached Procedure Library.</p>
<p>Note: <br />- This fix is also available in the OpenEdge 11.6.3.004 hot fix.<br /> <br />Steps to update the Procedure Library:<br />- Backup your current copy of $DLC/gui/OpenEdge.BusinessLogic.pl and $DLC/tty/OpenEdge.BusinessLogic.pl.<br />- Copy attached Procedure Library to $DLC/gui and $DLC/tty.</p>
Business Entity JSDO Mobile Kendo UI BuilderBusiness Entity JSDO Mobile Kendo UI BuilderKendo UI Builder by Progress Online Documentationhttps://community.progress.com/community_groups/openedge_kendo_ui_builder/m/documents/3102Mon, 19 Sep 2016 20:15:07 GMT22f5d987-ac14-4752-a665-ea95672bc1fb:eef4a66f-df37-4b20-b106-b83d5fabed3cAnkur Goyal0<p>This is the link to the online documentation for Kendo UI Builder by Progress: OpenEdge Edition. From here, you can also download all or any part of the documentation</p>KUIBdocumentationKUIBdocumentationCreating Progress OpenEdge Data Object Services for Kendo UI Builder Training Coursehttps://community.progress.com/community_groups/openedge_kendo_ui_builder/m/documents/3101Mon, 19 Sep 2016 20:12:39 GMT22f5d987-ac14-4752-a665-ea95672bc1fb:7ffc1890-9ffd-4576-8f2e-4fb63e0cc6c7Ankur Goyal0<div style="position:absolute;top:-1999px;left:-1988px;" id="stcpDiv">
<p>We have created several courses to help our customers take full advantage of all Kendo UI Builder capabilities. We hope this is beneficial to you in help you getting started with Kendo UI Builder</p>
- See more at: https://community.progress.com/community_groups/openedge_kendo_ui_builder/m/documents/3100#sthash.HP2pcu6f.dpuf</div>
<p>We have created several courses to help our customers take full advantage of all Kendo UI Builder capabilities. We hope this is beneficial to you in help you getting started with Kendo UI Builder</p>
<p>Designed for OpenEdge developers, this course teaches how to create Data Object services that run in a Progress Application Server for OpenEdge (PAS for OpenEdge) environment, as well as how to test Data Object services and package them for deployment.</p>KUIBtrainingKUIBtrainingDeveloping a Progress OpenEdge Web App Using Kendo UI Builder Training Coursehttps://community.progress.com/community_groups/openedge_kendo_ui_builder/m/documents/3100Mon, 19 Sep 2016 20:08:48 GMT22f5d987-ac14-4752-a665-ea95672bc1fb:fa6e6c9f-f436-49c1-9d52-bfab282a40b1Ankur Goyal0<p>We have created several courses to help our customers take full advantage of all Kendo UI Builder capabilities. We hope this is beneficial to you in help you getting started with Kendo UI Builder</p>
<p>In this course, you will learn how to develop a web app that presents a variety of views of the data to the user. You will create the web app in Kendo UI Builder that uses OpenEdge Data Object Services as sources of data. After you create the web app, you will test it. Finally, you will learn how to deploy the web app to PAS for OpenEdge.</p>KUIBtrainingKUIBtraining