JavaScript Archives - Applied Information Sciences

@aisteam

In Dynamics 365, it is common to extend the application’s capabilities to perform specific actions based on complex business logic. The most common way to do this is by utilizing JavaScript Functions in a web resource file.
Let us look at how we can develop custom JavaScript code to navigate between different forms in Dynamics 365 based on certain conditions.

Using JavaScript on Dynamics 365 Forms

In our scenario, we want Dynamics 365 to display a specific Form based on the Account Name field on the Account Entity. If the Account Name meets our condition, we want to display a specific Form. Otherwise, the Form will display the System Default.

Code Snippet

Here we have a JavaScript code snippet on how we can achieve this. Let us break down the code line by line.

Creating a Function

We will first start by looking at the function statement. For this function, we have named it formSwitch, and we are passing the executionContext parameters. The execution context defines the event context in which your code executes. We then define the formContext as a variable. When working with JavaScript on Dynamics 365 forms, this standard code should be used in your JavaScript Function.

Form ID and Attribute Value

After we have added our standard code, we then define a variable to get the current Form Id using the getId method. We also use a line of code to get the attribute value of our variable using the getValue method. In this case we are using the name field attribute.

In this line of code, we associate formId to the Form Id we want our JavaScript function to navigate to.

Switch Statement

Once all our variables are defined, we’ll tie everything together in a switch statement using accountName as our expression. In our switch statement, we included an If statement to check and see if our intended Form is loaded. If it is not loaded (formItem != formId), our JavaScript function will navigate to the specific form we have identified (formId) using the navigate method.

Web Resource and Form Properties

Once code is complete, create a Web Resource file with your code. Select Type as Script(Jscript) and use the Text Editor to paste your code.

From your form builder, add your Web Resource file to the Form Properties on your Account Form. Once Added to the Form Properties, add your Web Resource file in the Event Handler on an Onload Event. Include your function name, and check both boxes. Be sure to Save and Publish All Customizations.

Additional Resources

Conclusion

This blog explains how to extend Dynamics 365 capabilities with JavaScript Functions to navigate to different Forms based on an attribute value. The code snippet is broken down line by line with an explanation on what the code is doing and can be scaled up to handle complex scenarios. Lastly, the JavaScript Function and Dynamics 365 are tied together by deploying the code into a Web Resource on an OnLoad event. In a real-world scenario, it is a common business requirement for organizations to use different forms for capturing important information, whether it be based of Line of Business, Account Types, or even Types of Users. This guide can be tailored to accommodate any business needs.

Usman Humayon

This is a junior take at React Hooks – which is one of the most important things to understand when learning React. React is a JavaScript library. Learning React has been an interesting experience as most people are accustomed to object-oriented programming. With React being function-oriented, therefore immutable, it takes some time to familiarize. In this blog, we’ll dive into two of the most used Hooks in React: useState and useEffect. This will serve as a starting point in understanding how React works and how to mutate data in an immutable language.
First, we’ll start with the useState hook – the easiest one to understand in my experience. Here is an example of what useState Hook looks like:


       import { useState } from 'react';

const [variable, setVariable] = useState<boolean>(true);
const [stringArray, setStringArray] = useState<string[]>([]);

Before using the Hook, we need to Import it from the React library. I like to see that four parts in the useState are changeable. You have two variables in an array: the variable itself and the other is a function you call to set the variable straight forward. On the right side, we have the type of Boolean. In this case, it can be any type we want. Having this isn’t required if you leave it as useState(true). React will know that it is a Boolean, and lastly, we have the initial state, which is set to false. This is where you can have the initial value to be whatever you want when the component first renders. Now that we understand the parts that relate to the useState Hook, we will see an example.

            <div> {variable} </div>
    <Button onClick={setVariable(false)}>
        Click Me
    </Button>

Before the button is clicked, the variable will show as true because that is the initial state we had it set to. After clicking the button, the component will re-render and display the updated variable to be false. UseState is asynchronous and essential to remember because you might want to use the variable right after using setVariable, but update until the re-render.

        const [variable, setVariable] = useState<boolean>(true);

if (variable) {
    setVariable(false);
    console.log(variable)
}

Expectations will lead you to believe that the console.log will display false, but that isn’t the case. You will not be able to access the new variable until there has been a re-render. Now let’s move on to useEffect which helps you makes update when something changes.
This Hook can get tricky quickly and is difficult to get correctly.


    	import { useEffect } from 'react';

useEffect(() => {
    console.log('hello world');
}, []);

There are two parts to useEffect. The first argument is the closure/function that contains what you want to run the useEffect. The second part is the array towards the end of the useEffect. This array is how you can choose when the useEffect runs. In the array, you can add any variable that will result in this useEffect running when changed. Here is a quick example.

const [variable, setVariable] = useState<boolean>(true);

 useEffect(() => {
     console.log('hello world');
 }, [variable]);

 <Button onClick={setVariable(false)}>
    Click Me
 </Button>

This useEffect will run only once when the button is clicked. The variable will change from the useState, and will cause the useEffect to run. A couple of things to note about the useEffect are that; the first time it will run is when the component that’s using it is mounted. And if the array is empty, then useEffect will only run once. One thing that makes the useEffect tricky is when calling a function in useEffect. If useEffect is not added to the array, it will cause a warning. You can ignore the warning, and the code will run just fine. To get rid of the warning, you can add the array’s function, but that can cause an issue in that it might continue running useEffect multiple times and feels less controlled. One thing that can fix the warning is adding the function within the useEffect. That won’t cause unnecessary re-rendering and will get rid of the warning.

These two Hooks will give you a good start in understanding React because almost all components you create will use those two. Learning about these two Hooks gave me a much better understanding of React and I moved deeper into the React world.

Matt Schmitt

Building cross-platform applications is an excellent option for many organizations that need to support different technology vendors. Today, we can build websites that reach a massive audience regardless of the device that they use. Additionally, cross-platform mobile applications are an attractive option. All that is left now are the beloved applications that sit on our desktops. With tools such as Electron, desktop applications do not have to suffer from a lack of operating system support.

Electron is a framework that allows developers to create cross-platform desktop applications using a combination of HTML, CSS, and JavaScript. What makes Electron a viable solution is that it pairs with JavaScript frameworks very well. This means that there is generally a lower learning curve when injecting JavaScript into an Electron solution. Since JavaScript is such a popular option in today’s application development domain, it can make sense to leverage that experience in an Electron solution.
Developers can use any modern JavaScript framework, such as Angular, React, or Vue, within an Electron application.

For this post, I will be discussing how you can pair Electron with Vue to build your next cross-platform desktop application. I will cover some of the reasons why Vue should be considered as a viable integration option and highlight some useful features of Electron that I have been exposed to.

So Why Use Vue with Electron

While there is no perfect framework to pair with Electron, Vue offers some advantages. It is worth noting that the choice of the framework will depend on several factors. These are just general observations and findings from my experience with Vue.

Reasons to consider Vue:

The lower learning curve for new developers
Features a well-organized template for Vue files
Less boilerplate code that increases project size
Able to easily customize application builder (might be dependent on the way you scaffold your Electron solution)
Swiftly build prototypes and/or small-medium sized applications

A word of caution: if you choose Vue with Electron, the documentation is scarce in some areas. I assume that Vue is not a popular JavaScript framework like React and Angular.

During my time using Electron with Vue, I have come across several useful features. I will provide a few examples of these features, and hopefully, this will shorten the gap of implementing them into your next Electron/Vue application.

Custom Menus

One common scenario, when building Electron applications, is to come up with your menu schema. Electron ships with a default menu that includes options you would find in your Chrome browser since Electron runs on Chromium. That said, the default menu will probably not be good enough for a production build of your application. Depending on your situation, you might want to limit certain menu features from your users, such as the developer tools or the ability to force reload the application. Customizing your application’s menu is a straightforward process.

You can customize the menu within the Electron main process file.

Custom Events

In my experience using Vue with Electron, I have used Electron specific events to accomplish certain tasks. Depending on your application, you will more than likely need to use events. One common scenario would be to show a confirmation popup window when you want to exit the application. This not only utilizes Electron’s built-in events, but it uses custom Electron events as well. Below is a simple implementation for this.

First, a preload.js file is needed so that Electron events can be properly used within Vue components.

Next, the preload file will need to be referenced in the Electron main process file. The preload file path will depend on both the environment and operating system the app is running on. Additionally, the preload file will need to be added as an extra resource within a builder config file for production builds. This process will be discussed in a later section.

Within the method for creating the Electron window:

In the Electron main process file, you can then send out a custom event to any Vue components that are subscribed to it.

A Vue component can then perform certain logic once this event occurs.

Here are the results from clicking the exit button in the application.

Referencing External Resources

There might come a time where your application will need to reference-dependent static resources. This could be a spreadsheet file containing data for U.S. states, cities, zip codes, or a CSV file containing data about countries. Also, it could be a preload file, as previously mentioned in this post.

When your Electron/Vue application is built for production, the application gets bundled into an asar file. This is your whole application. If your application needs to load external files, such as a CSV file or preload file, it will need to point to that specific file. As mentioned earlier, your application gets bundled into an asar file. How can you reference a dependent file from your Electron/Vue application? There are essentially two things you need to do.

1 – Customizing the Electron Builder

The first step is to customize the Electron builder within a Vue config file. One thing to note is that I have used electron-builder for building Electron applications and used it for this example.

You will want to create a file called vue.config.js that resides in the root directory of your Electron/Vue solution. This file will, again, allow you to customize the builder for your Electron/Vue application. There is an option to specify any extra resources (or external resources) that your application may reference. The builder’s configuration will need to know where your resource is in your solution and where to place it.

Your config file should look something like this.

After the application gets built and installed onto the local machine, any resources within the extra resources section will be placed under the following paths:

Windows: C:\Users\\AppData\Local\Programs\\Resources\Vue
Mac: /Applications/.app/Contents/Resources/Vue

2 – Referencing the External Resource

The last step is to reference the external resource, using the appropriate path, within your application. It is recommended that you specify both the development and production path to your resource so that both environments can access it. This can be accomplished within the Electron main process file. The reason is that we can utilize the Node dirname variable. Using this variable will help us acquire the full path.

From there, you can add this logic within a custom, or predefined, Electron event. The event could either process the file and send the results back to any components subscribed to a “reply” event, or the event could send the full file path to any subscribed components for them to process the file.

In this example, I used an approach where the file is processed in the Electron main process file, and the file contents are sent to a subscribed component.

Vue component publishing an event to get a file’s contents and then listening for a reply event.

Once the event gets published, the Electron main process will read the given file. Then it will reply with the contents of the file.

The way you process your file will depend on the file type and the actual data that is contained within it. For this example, I used a text file. That said, I encourage you to use the appropriate logic to extract the contents of your file.

Closing Thoughts

Using Vue with Electron has become an excellent duo for building cross-platform desktop applications. You can craft custom menu options that can help add to the user experience. Also, Electron and Vue allow you to develop custom events that allow for more robust business logic. Finally, crucial assets such as external files can be properly processed inside an Electron/Vue solution, which can help you need swift data processing. All in all, Electron and Vue give you the tools to build rich, customizable desktop applications.

AISblog

@aisteam

AIS recently completed work on a complete revamp of the Texas Workforce Commission’s “Texas Reality Check” website. Texas Reality Check is an Internet-available, fully accessible, responsive, mobile-first and browser-agnostic design. This website was tested for accessibility, performance, vulnerability scans, and usability.

Background

Texas Reality Check (TRC) is targeted at students on a statewide basis, ranging from middle school to high school (with some colleges and universities making use of the tool for “life skills” classes). The goal is to inspire students to think about occupations, and prepare for educational requirements so they can achieve the income level that meets their lifestyle expectations.

This tool walks students through different areas of life, on a step-by step-basis, identifying budgets associated with living essentials such as housing, transportation, food, clothing, etc. Students make selections and then calculate a corresponding monthly income that would afford the selections they make. From here, the students are directed to another page and connected to a database on careers and associated salaries.

However, the existing site was dated and in need of improvements in three core areas: UX, Accessibility, and overall performance. Here’s how AIS delivered:

Kevin Hennessy

I recently attended ng-conf (the annual Angular conference) held in Salt Lake City during the first week of May. Over 1500 developers were there. Of course the big news was that Angular 2, the next version of the framework, has moved from beta to release candidate. Angular 2 (which departs substantially from earlier versions of Angular) has a forward looking emphasis, incorporating emerging technologies like web components, ES 2015 (the new version of JavaScript) and TypeScript. You can read more about it here: http://angular.io.

Not surprisingly most of the workshops at the conference focused on Angular 2. A single session track ran on both Day 1 and Day 3 and you can find the YouTube videos for those sessions on YouTube at this link: https://www.youtube.com/playlist?list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j. There were multiple concurrent sessions on Day 2 and not all of them were captured on video. I attended several that covered building components in Angular 2, TypeScript and unit testing.

Developer uptake has been strong with upwards of 360,000 developers who are active on the Angular 2 site. Several enterprise partners that have started using Angular 2 were present, including Capital One, Fidelity Investments and the Weather Channel. Read More…

Sam Larko

@SPSamL

With the abundance of JavaScript libraries and frameworks available today, it’s hard to decide what is going to work best for a certain requirement. Add in the fact that there are many server-side tools that can also accomplish the task and you could spend hours just narrowing down options to test before deciding on the path you’ll take in the end. This was a recent conundrum for me when approached to incorporate child data management in the parent forms on a SharePoint 2010 project. My experience with JavaScript has been limited over my career because I’ve been so focused on the backend of SharePoint during the majority of that time. My current client has need for a better user experience, so I’ve been trying to fill that hole in my skills. This project offered an opportunity to do just that.

While it’s possible to put an ASP GridView control in an Update Panel, a client-side approach seemed cleaner and a way to expand my JavaScript skills. I looked at many options like JQuery Datatables, koGrid, and a few others, but they didn’t give me the look, price (free), and/or TypeScript definitions for me to easily take off with implementing it.

I decided to build my own solution since it would be a relatively simple design and it would let me dig into KnockoutJS. In addition, it would be easier to use TypeScript to build an easier-to-maintain solution since it incorporates many of the ECMAScript 6 features like classes and modules, among others. Read More…

Brent Wodicka

@bwodicka

What is ECMAScript? ECMAScript is the standards name for the language many of us know as JavaScript. To envision the relationship between the two, think of ECMAScript as the language, and JavaScript as the dialect. There are other dialects – including JScript, ActionScript, etc. – that are still around. These days, developers commonly use the terms “ECMAScript” and “JavaScript” to mean the same thing – and more and more I see developers referring to implementing ECMA, ES, or ECMAScript.

Version six of the ECMAScript standard – code-named “Harmony” – will include some very interesting features that bring the experience of implementing complex apps on the client side closer to the experience server side developers know and love. Although some of these features have been previously available using a combination of patterns and third party plugins – ECMAScript 6 aims to make many commonly used features available natively.

I’ll walk through a few of my highlights below, but keep in mind version 6 is a large release that has been a long time coming (five years since the last version’s publication) and has a ton of functionality and improvements that will be well worth exploring. So the features sites below should not be seen as any more or less important that other ES6 features. Also, it’s worth noting that not all browsers will support every feature right away, but it appears as if the development teams behind the major browsers are very motivated to support as much of the standard they can – as quickly as possible. Read More…

tom mckearney

@tommckearney

Durandal is a popular Single Page Application (SPA) framework for web development. I recently had the need to develop a WinJS project for Windows 8.1 and wanted to make use of our existing in-house Durandal expertise, so we used Durandal.

In this article, we’ll go over what’s needed to get the Durandal Starter Kit running in a WinJS application. Read More…

Christine Rabine

Change Data Views from Boring to Flashy

Data, data, data… Working professionals are inundated with data. Anything that makes that data easier to understand, analyze, and compare is a welcome breath of fresh air. Why snooze over a boring and static table when you can view key metrics at-a-glance in a snazzy chart?

Many SharePoint sites are used for managing internal business processes where users store and analyze data. SharePoint 2013 makes it easy to store data in lists, and view that data in a team site, but usually that data is shown in a basic table view. Read More…

Will Miller

I recently encountered a requirement to programmatically zip multiple files into an archive in a Windows 8 JavaScript/HTML app. The intent was to shrink the several large files as much as possible for eventual submission to a central server. This operation needed to occur without the user’s direct involvement as part of a larger data transmission process.

While the Windows.Storage.Compression namespace does provide an interface for compressing individual files, there is no native support for creating a multi-file archive. In order to implement this feature I chose to use the third-party JSZip library, which is a light wrapper around the zLib library. Read More…

BlogPosts tagged with “JavaScript”