How to display dynamic font Awesome icons in a node

GoJS
1

We have added the gojs diagram in an Appian plugin.

my NodeDataArray :
nodes{
{
icon:“\uf1ad”
},
{
icon:“\uf013”
}}

I am trying to render the icon in a node like below,

$(go.TextBlock,
{
font:‘12pt FontAwesome’,
stroke:‘#000’,
margin:8
},
new go.Binding(“text”,“icon”)
),

When I try this code in a local JS file the icon is rendering on the go.js graph node.
But when I try to integrate the code in the Appian plugin the icon is not rendering.

But In appian when I try to give hardcorded value icon is rendering on the node, as per the below code.

$(go.TextBlock,
{
text:“\uf1ad”,
font:‘12pt FontAwesome’,
stroke:‘#000’,
margin:8
},
new go.Binding(“text”,“icon”)
),

Then why is when I try to bind the dynamic value to the text icon is not rendering only a text string is coming

2

My guess is that when you are putting your code in that Appian plugin the literal data is being “corrupted” because the escaping of the Unicode character in the string is broken. Your experiments have cleverly shown that once the string is correct in the GoJS model, everything works the way that you want.

Check that the model data’s data.icon property value really does have the character in it that you want as soon as the data arrives/exists for you to add to the GoJS model.

3

We debugged, the unicode value coming in the nodeArray is coming properly. But not showing as icon on node.

We are getting the unicode character from appian input, is there any way , so that the string will not break .Can you suggest any other way to display icon apart from Textblock using the same unicode value(or the actual icon name .Ex: ‘\uf1ad’ represents 'building")

4

I thought your earlier code showed that when the font was already loaded and myDiagram.model.nodeDataArray[0].icon.length === 1 the displayed text showed the desired icon.

5

updated post

6

??? I don’t see anything in your most recent post.

You probably have a fixed number of icons that you need to show.

Define a JavaScript constant that is an Object mapping names to the desired Font Awesome string and define a Binding conversion function.

const Icons = {
  "building": "\uf1ad",
  . . .
};

function iconToString(name) {
  return Icons[name] || "\uf1ad";  // use default string if name is unknown
}

Use that conversion function on your TextBlock.text Binding:

    new go.Binding("text", "icon", iconToString)

Then change your model data to use those easy-to-read names instead of Font Awesome strings.

nodeDataArray: [
  {
    icon: "building"
  },
  . . .
]