Resources Control Setup

No property code for resources yet in docs, but guessing it’s this?:

{
  "title": "Resource:",
  "property": "resource",
  "resource": {}
}

Not sure if resource is for non-image files like pdf, zip, video, audio, etc?

Bill
Stack-Its

Yep, that’s it. I’ve updated the docs here

This is my resource control snippet text only:

{
  "title": "Resource:",
  "properties": [{
    "title": "Resource Title",
    "property": "resource",
    "resource": {}
   }]
}

The control is not showing in the sidebar and no value in template.

I’m guessing there’s some ill formatted code around it? Can you show us the entire properties file? If so we can see if we can spot the error for you…

The following code example for the Resource control works:

{
    "groups": [{
        "title": "Resource Example",
        "properties": [{
            "title": "Resource",
            "property": "resource",
            "resource": {}
        }]
    }]
}

Here’s the entire properties file, so far :wink: :

{
"groups": [
  {
    "title" : "Group Name1",
    "icon": "textformat.size",
    "properties": [
      {
        "title": "Heading",
        "heading": {}
      },
      {
        "title": "Information",
        "information": {}
      },
      {
        "divider": {}
      },
      {
        "title": "Text1:",
        "properties": [{
          "title": "Text2",  
          "property": "text",
          "text": {
           "default": "Hi",
           "subtitle": "Subtitle"
          }
        }]
      },
      {
        "title": "TextArea:",
        "properties": [{
          "title": "TextArea2",
          "property": "textarea",
          "textArea": {
            "default": "Hello World",
            "subtitle": "Subtitle"
          }
        }]
      },
      {
        "title": "Image:",
        "property": "image",
        "image": {}
      },
      {
        "title": "Link:",
        "properties": [{
          "title": "Link Text",
          "property": "link",
          "link": {
            "subtitle": "Subtitle"
          }
        }]
      },
      {
        "title": "Number:",
        "properties": [{
          "title": "Number Title",
          "property": "number",
          "number": {
            "default": 100,
            "subtitle": "Subtitle"
          }
        }]
      },
      {
        "title": "Resource:",
        "properties": [{
          "title": "Resource Title",
          "property": "resource",
          "resource": {}
        }]
      },
      {
        "title": "Segmented:",
        "property": "alignment",
        "segmented": {
          "default": {
            "base": "align-left",
            "md": "align-center"
          },
          "items": [
            {
              "value": "align-left",
              "icon": "text.alignleft"
            },
            {
              "value": "align-center",
              "icon": "text.aligncenter",
              "default": true
            },
            {
              "value": "align-right",
              "icon": "text.alignright"
            }
          ]
        }
      },
      {
        "title": "Dropdown:",
        "property": "dropdown",
        "select": {
          "default": "none",
          "items": [
            {
              "title": "None",
              "value": "none"
            },
            {
              "title": "One",
              "value": "one"
            },
            {
              "title": "Two",
              "value": "two"
            }
          ]
        }
      },
      {
	    "title": "Slider-Number:",
	    "property": "slpercent",
	    "format": "{{value}}%",
	    "slider": {
		  "default": 50,
		  "min": 0,
		  "max": 100,
		  "units": "%",
		  "round": true
	    }
      },
      {
	    "title": "Slider-Text:",
	    "property": "sltext",
	    "slider": {
		  "default": "0",
		  "items": [
            {
              "title": "Zero",
              "value": "0"
            },
            {
              "title": "Fifty",
              "value": "50"
            },
            {
              "title": "One Hundred",
              "value": "100"
            }
          ]
	    }
      },
      {
        "title": "Switch-Boolean:",
        "property": "switch1",
        "responsive": false,
        "switch": {
          "default": false
        }
      },
      {
        "title": "Switch-String:",
        "property": "switch2",
        "switch": {
          "trueValue": "block",
          "falseValue": "hidden",
          "default": false
        }
      },
      {
        "title": "Border:",
        "property": "myborderwidth",
        "themeBorderWidth": {
          "default": {
            "base": {
              "top": "0",
              "right": "0",
              "bottom": "0",
              "left": "0"
            }
          }
        }
      },
      {
        "title": "Radius:",
        "property": "borderRadius",
        "themeBorderRadius": {
          "default": {
            "base": {
              "topRight": "none",
              "topLeft": "none",
              "bottomRight": "none",
              "bottomLeft": "none"
            }
          }
        }
      },
      {
        "title": "Color:",
        "property": "customColor",
        "format": "text-{{value}}",
        "themeColor": {
          "default": {
            "name": "black",
            "brightness": 300
          }
        }
      },
      {
        "title": "Font:",
        "property": "fontFamily",
        "themeFont": {
          "default": {
            "base": {"name": "body"},
            "md": {"name": "quote"},
            "sm": {"name": "heading"}
          }
        }
      },
      {
        "title": "Padding:",
        "property": "padding",
        "themeSpacing": {
          "mode": "padding",
          "default": {
            "base": {
              "left": "sm",
              "right": "sm",
              "top": "sm",
              "bottom": "sm"
            },
            "md": {
              "left": "md",
              "right": "md",
              "top": "md",
              "bottom": "md"
            }
          }
        }
      },
      {
        "title": "Margin:",
        "property": "margin",
        "themeSpacing": {
          "mode": "margin",
          "default": {
            "base": {
              "left": "sm",
              "right": "sm",
              "top": "sm",
              "bottom": "sm"
            },
            "md": {
              "left": "md",
              "right": "md",
              "top": "md",
              "bottom": "md"
            }
          }
        }
      },
      {
        "title": "Gap:",
        "property": "gap",
        "themeSpacing": {
          "mode": "gap",
          "default": {
            "base": {
              "left": "sm",
              "right": "sm",
              "top": "sm",
              "bottom": "sm"
            },
            "md": {
              "left": "md",
              "right": "md",
              "top": "md",
              "bottom": "md"
            }
          }
        }
      },
      {
        "title": "Transition:",
        "property": "transition",
        "themeSpacing": {
          "mode": "transition",
          "default": {
            "base": {
              "left": "sm",
              "right": "sm",
              "top": "sm",
              "bottom": "sm"
            },
            "md": {
              "left": "md",
              "right": "md",
              "top": "md",
              "bottom": "md"
            }
          }
        }
      },
      {
        "title": "Position:",
        "property": "position",
        "themeSpacing": {
          "mode": "position",
          "default": {
            "base": {
              "left": "sm",
              "right": "sm",
              "top": "sm",
              "bottom": "sm"
            },
            "md": {
              "left": "md",
              "right": "md",
              "top": "md",
              "bottom": "md"
            }
          }
        }
      },
      {
        "title": "BoxShadow:",
        "property": "boxshadow",
        "themeShadow": {
          "default": {
            "name": "none"
          }
        }
      },
      {
        "title": "Text Size:",
        "id": "textsize",
        "themeTextStyle": {
          "default": {
            "base": {
              "name": "base"
            }
          }
        }
      }
    ]
  },
  {
    "title" : "Group Name2",
    "icon": "textformat.size",
    "properties": [
      {
        "title": "Text2:",
        "property": "title",
        "text": {
          "default": "Hi2",
          "subtitle": "Subtitle"
        }
      }
    ]
  }
]
}

Okay, that works here… where do you want the resources control?

Here it is working at the bottom of the file…

or in Group Name2

I guess you are asking where I put the resource call in Group Name1 - it’s already in there at about line #67

Okay, so it’s a coding error. You had this…

and it should be this…

hope that helps, you fix up your other control issues too :wink:

Ok, need to update all your docs again, as that properties attribute was added in last couple of days. Maybe it doesn’t work because my version doesn’t support that - and that’s what Tom is going to do?

Hi @Bill, the properties attribute has only ever been used in a top level group object. A group adds a collapsable group to the inspector and has just the title and properties attributes.

I updated all examples in the docs this morning to provide a complete properties json example which includes a top level group object. This is to make it easy to copy and paste a complete example into a custom component to see how it works.

Before I did this, there was an inconsistent mix of examples that either showed a complete example, or a partial example containing just a single UI control, or had syntax issues.

Please be careful when copying from the docs to an existing properties file, you’ll just need the object within the properties array, like this.

I just posted to Dan about this: Text Area Control Setup - #5 by Bill

The way you have it now is really going to confuse people and cause support loads :wink: