How to: Set Object Values Using Lodash

Overview

When using Unqork, you might want to create or change the values of an object. To do that, use the _.create and _.set Lodash functions.

To read more about the parameters of the _.create and _.set Lodash functions, visit: https://lodash.com/docs/4.17.15.

How This Example Works

In this example, you'll use the _.create and _.set Lodash functions to create and alter your object path and value. First, you'll create an object using the _.create function. Next, you'll use end-user End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. input to alter the key/value pair of your object using the _.set function to set the path, or key, and value of your created object. Then, your module outputs the new key/value pair to the end-user.

Here are the basic steps for this example:

1. Your Calculator component creates a new object.
2. The end-user enters their key and value to hardcode into the object.
3. The object's key/value pair is hardcoded with the end-user's input.
4. The new object values display to the end-user.

Here's how the comnfiguration looks in the Module Builder:

A static image displaying the set object values with Lodash use case in the UDesigner module builder.

Here’s how the configuration looks in Express View Express View is how your end-user views you application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.:

A static image displaying the set object values with Lodash use case in Express View.

Creating Objects Using Lodash

The first step is to create an object using the _.create function. In this example, you'll create your object by hardcoding a value from a Hidden component. Start by adding a iconHidden component to your module and name it object. Then, add an Radio Button component icon Initializer and  Calculator component, naming your  Calculator as calcCreateObject. The Radio Button component icon Initializer component triggers the calcCreateObject  Calculator component, which hardcodes an object value to your company iconHidden component. In the  Calculator component's Outputs table Enter outputs components and actions you want the component to perform., you'll enter the Property ID of the iconHidden component. Then, you'll enter the _.create function using the following Unqork syntax: =LODASH("create","object").

Here's how your calcCreateObject  Calculator component's Inputs and Outputs configuration looks: 

A static image displaying the calcCreateObject Calculator component's outputs table configuration in UDesigner.

Here's how these three components look in the Module Builder

A static image displaying the Intitializer, calcCreateObject Calculator, and Hidden component configuration in the UDesigner module builder.

Assigning Value Paths Using Lodash

Now that you have your object value hardcoded in a Hidden component, alter its key/value pair. As mentioned, you'll use the _.set Lodash function and end-user input to complete this task.

For end-user input, use two  Text Field components to collect the key and value. Then, add another  Calculator component called calcSetKeyValue to input your object and  Text Field components.

In the calcSetKeyValue  Calculator component's Outputs table Enter outputs components and actions you want the component to perform., enter object for the Property ID. In the Formula field, you'll enter =LODASH("set",company,key,value). Because the _.set Lodash function takes the object, path, and value parameters, you'll use the iconHidden component for your object parameter and your end-user's key and value.

Here's how your calcSetKeyValue  Calculator component's Inputs and Outputs configuration looks: 

A static image displaying the calcSetKeyValue Calculator component's inputs and outputs table configuration in UDesigner.

 

Overview

When using Unqork, you might want to create or change the values of an object. To do that, you can use the _.create and _.set Lodash functions.

To read more about the parameters of the _.create and _.set Lodash functions, visit: https://lodash.com/docs/4.17.15.

How This Use Case Works

For this use case, you'll use the _.create and _.set Lodash functions to create and alter your object path and value. First, you create an object using the _.create function. Next, you'll use end-user End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. input to alter the key/value of your object. To do that, you'll use the _.set function to set the path, or key, and value of your created object. Then, your module outputs the new key/value for the end-user to see.

Here are the basic steps for how this use case works:

1. Your Calculator component creates a new object.
2. The end-user enters their key and value to hard code onto the object.
3. Your object's key/value gets hardcoded with the end-user's input.
4. The new object values display to the end-user.

Here's how the module looks in the Module Builder:

A static image displaying the set object values with Lodash use case in the module builder.

Here’s how the use case looks in Express View:

A static image displaying the set object values with Lodash use case in Express View.

Creating an Object with Lodash

The first step is to create an object using the _.create function. In this example, you'll create your object by hardcoding a value from a Hidden component. Start by adding a iconHidden component to your module and name it object. Then, add an Radio Button component icon Initializer and  Calculator component, and name your  Calculator calcCreateObject. The Radio Button component icon Initializer component triggers the calcCreateObject  Calculator component, which hardcodes an object value to your company iconHidden component. In the  Calculator component's Outputs table Enter outputs components and actions you want the component to perform., you'll enter the Property ID of the iconHidden component. Then, you'll enter the _.create function using the following Unqork syntax: =LODASH("create","object").

Here's how your calcCreateObject  Calculator looks: 

A static image displaying the calcCreateObject Calculator component's outputs table configuration.

And, here's how these three components look in your module

A static image displaying the Intitializer, calcCreateObject Calculator, and Hidden component configuration in the module builder.

Assigning Value Paths with Lodash

Now that you have your object value hardcoded in a Hidden component, alter its key/value pair. As mentioned, you'll use the _.set Lodash function and end-user input to complete this task.

For end-user input, use two  Text Field components to collect the key and value. Then, you'll add another  Calculator component called calcSetKeyValue to input your object and your  Text Field components.

In the calcSetKeyValue  Calculator component's Outputs table Enter outputs components and actions you want the component to perform., enter object for the Property ID. In the Formula field, you'll enter =LODASH("set",company,key,value). Because the _.set Lodash function takes the object, path, and value parameters, you'll use your iconHidden component for your object parameter and your end-user's key and value.

Here's how your calcSetKeyValue  Calculator looks: 

A static image displaying the calcSetKeyValue Calculator component's inputs and outputs table configuration.

Displaying Value Paths with Lodash

Configure a Button component Icon Button component to trigger your calcSetKeyValue  Calculator component and view the object value in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software..

Preview your module in Express View Express View is how your end-user views you application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View. and open the DevTools Console. Enter a key and value to set your object, and click the button to initiate the change.

A static image displaying the DevTools Console where the key/value are overwritten by end-user input.

Now that you know how to use Lodash functions in your formulas, let’s look at how you can use RegEx in your configuration.

Resources