Implementing App Locations: Field Modifier

The Field Modifier Location is a type of UI location which extends the capabilities of entry fields. With the Field Modifier UI location, you can allow the different apps to appear on defined field data types such as Text, Number, JSON, Boolean, File, Reference fields etc...

Use Case

Using the Field Modifier UI location you can manage the content of a field, you can get the value of a field, modify it according to your use case, and update it in the entry. Form this location, liken in the others, you can get the application configuration, and entry data using Contentstack SDK, too.

A common use case can be machine translation of a field, you can send a single field for translation to a third-party system, wait for it response and update the field. You can also use this location to implement logic to get sentiment analysis, ensure that your editors follow your companies messaging guidelines by removing unwanted terms and ensuring that certain others are used etc...

You can refer to the sample code below on how to access the field value data and to update the entry as needed:

useEffect<span>(</span><span>(</span><span>)</span> <span>=&gt;</span> <span>{</span>
  ContentstackAppSdk.<span>init</span><span>(</span><span>)</span>
    .<span>then</span><span>(</span>async <span>(</span>appSdk<span>:</span> any<span>)</span> <span>=&gt;</span> <span>{</span>
<span>const</span> config <span>=</span> await appSdk<span>?</span>.<span>getConfig</span><span>(</span><span>)</span><span>;</span>
<span>const</span> entryData <span>=</span>
        appSdk<span>?</span>.<span>location</span><span>?</span>.<span>FieldModifierLocation</span><span>?</span>.<span>field</span><span>?</span>.<span>getData</span><span>(</span><span>)</span> <span>||</span> <span>""</span><span>;</span>
      appSdk<span>?</span>.<span>location</span><span>?</span>.<span>CustomField</span><span>?</span>.<span>frame</span><span>?</span>.<span>enableAutoResizing</span><span>(</span><span>)</span><span>;</span>
 
      setEntry<span>(</span>entryData<span>)</span><span>;</span>
 
      setState<span>(</span><span>{</span>
        config,
        location<span>:</span> appSdk<span>?</span>.<span>location</span>,
        appSdkInitialized<span>:</span> <span>true</span>,
<span>}</span><span>)</span><span>;</span>
      setLoading<span>(</span><span>false</span><span>)</span><span>;</span>
<span>}</span><span>)</span>
    .<span>catch</span><span>(</span><span>(</span>error<span>:</span> any<span>)</span> <span>=&gt;</span> <span>{</span>
      console.<span>error</span><span>(</span><span>"appSdk initialization error"</span>, error<span>)</span><span>;</span>
      setError<span>(</span><span>"Something went wrong!"</span><span>)</span><span>;</span>
<span>}</span><span>)</span><span>;</span>
<span>}</span>, <span>[</span><span>]</span><span>)</span><span>;</span>
 
<span>const</span> updateEntry <span>=</span> <span>(</span>updatedData<span>:</span> any<span>)</span> <span>=&gt;</span> <span>{</span>
<span>const</span> <span>{</span> location <span>}</span> <span>=</span> state<span>;</span>
  location.<span>FieldModifierLocation</span><span>?</span>.<span>field</span><span>?</span>.<span>setData</span><span>(</span>updatedData<span>)</span><span>;</span>
<span>}</span><span>;</span>

Exercise 7

In this exercise you will show the configuration value stored when using the App Configuration location, and also you will add a button, that when clicked, will capitalize the value of the field.

Using your code editor, access the file located at: src/containers/FieldModifier/FieldModifier.tsx
In that file, locate the {/* your code goes here */} and replace it with this:

<h3>{state?.config?.title}</h3>

<button onClick={() => updateEntry(entry.toUpperCase())}>Capitalize</button>

</>

Note: notice how in this case we used a regular button html element as opposed to a Button component from the Venus Component Library. This shows how you can use the library of your choice and any components that might fit better your application and your UI requirements.

Save your file and make sure that your application is still running with no errors.

Tip: in case you might have experienced any issues or your application is erroring, the final code is provided in the src/containers/SidebarWidget/solution.txt file, which contents you can copy and paste into the src/containers/SidebarWidget/EntrySidebar.tsx file.

Using the left navigation bar, select the Entries section.

Next, find the entry you saved when you developed the Custom Field Location.

From the editorial form screen, over the title field click the Sample App icon:

You should see something like this:

On the field modifier dialog, click the Capitalize button, it should capitalize the value of the field as follows:

As you can see the title has been capitalized.

Tip: make sure you go over the entire code in the file to get a better understanding on how the logic is implemented.

If you want to learn more about this location, please visit our documentation: Field Modifier Location

Next, you will develop a JSON RTE extension.

Video: Implementing Field Modifier Location

The following video walks you through the previous exercise steps so you can review and follow along:

Building Marketplace Apps

Implementing App Locations: Field Modifier

Use Case

Exercise 7

Video: Implementing Field Modifier Location