Resource Property File Types?

Elements Component Development
1

@dan @ben Is it possible to add an HTML file to a resource property and have the file path be exposed in a custom component?

I’m trying to see if it is possible to inject the contents of a file into a custom modal dialog. I have this working, no problem, using a hard-coded link to the file in the resources. But it would be so much nicer if the user could drag the file from the resources into a drop well, which would then expose the correct path to the resource.

If this won’t work, is there an alternative way to accomplish this without needing the hard-coded file path?

I’m assuming in the future this might be able to be accomplished using the CMS, right?

2

That should work, or better yet you might just want to use the link control, it’s how we do it in the CMS for pointing to markdown files…

@ben is probably the best one to answer on exactly how to do this!

3

and yes, you could 100% do this with the Elements CMS!

4

@dan Aloha Dan, I tried this with a link property, but I could not get it to work. I’ll try it again once I finalize all of the properties. The problem I ran into was that the path was not delivered in the correct format; it was always missing the /resourcepreface.

But then I was trying so many different things that I could easily have been causing more problems.

UPDATE: I tested this again, and it is working as expected and delivering the intended path. The problem I’m facing is how to expose this in the JS code where the contents of the file are being accessed. Do I need to expose the path through the hooks.js so that the JS code can access it? I tried this, but it always returned NULL, so clearly I’m doing something wrong and will need some guidance.

SECOND UPDATE: Well, I was wrong, using the link property is NOT giving me any path information, it is NULL, so I cannot use it to load the file. Is there some special way the path has to be extracted from the link?

5

Hi @handshaper

I think using the link control is the way to go for this — create the HTML file as a page in the project, and then link to it using a link control.

The link control will give you an href property that can act as a relative path to the linked file.

So you’d use linkControl.href to find the relative path to the linked file, once you have that you can load in that file’s content however you’d like.

This is essentially how we’re loading in content in the CMS.

Hope that helps! :slight_smile:

6

@ben Would this same approach work with an HTML file that was in the resources, and then link to it, and extract the HREF from the link?

This seems to give me the information I need, but I cannot figure out how to get access to this in the script where I’m currently handling the loading of the hard-coded HTML file. I have the hooks passing the path to the file out, but that does not appear to expose it in the JS script.

I am becoming extremely frustrated trying to get this to work.

7

Nevermind with the help of the AI bot I got it figured out, so now I’m loading a file from the resources and populating to contents in my popup display. Awesome, phew!

2 Likes