Building CMPs, Adding CSS and JS

14 Posts

mody_newbie Reply #1, 11 years ago

Hi,

I'm trying to build my extra and really struggling with lack of documentation on many areas.

I followed this tutorial to build a CMP
https://rtfm.modx.com/revolution/2.x/developing-in-modx/advanced-development/custom-manager-pages/custom-manager-pages-tutorial

now that it works, I need to include additional JS files and customize my CMP.

I dont need to make a grid (i.e doodles), so I need more details and tutorials to learn how to make different layouts inside CMPs.

Is there a reference or tutorial I can follow?

Do I need to master ModxExt to be able to build it?

Thanks

This question has been answered by BobRay. See the first response.

discuss.answer

24,544 Posts

BobRay Reply #2, 11 years ago

Some CMPs use modExt, but it's not required. You can use plain HTML/CSS, and/or JQuery. Styling it depends on how much you want it to look like the rest of the Manager. You can usually examine the code of another CMP to find out what CSS classes you need to use.

You can load JS and CSS in your PHP code with one of the $modx->regClient... methods.

You might also want to look at MyComponent, which has an example CMP build in it. You can modify the config file for your extra to include whatever you need for your extra. MyComponent is a little challenging to learn, but it will handle putting all the files in the right places, provide stubs for all the parts of your component (including license, readme.txt, and changelog files), help you with internationalizing your extra, and build the transport file for you automatically. If you plan on updating your extra over time, it's well worth learning, imo. [ed. note: BobRay last edited this post 11 years ago.]

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

14 Posts

mody_newbie Reply #3, 11 years ago

Quote from: BobRay at Sep 17, 2015, 02:32 PM

Some CMPs use modExt, but it's not required. You can use plain HTML/CSS, and/or JQuery. Styling it depends on how much you want it to look like the rest of the Manager. You can usually examine the code of another CMP to find out what CSS classes you need to use.

You can load JS and CSS in your PHP code with one of the $modx->regClient... methods.

You might also want to look at MyComponent, which has an example CMP build in it. You can modify the config file for your extra to include whatever you need for your extra. MyComponent is a little challenging to learn, but it will handle putting all the files in the right places, provide stubs for all the parts of your component (including license, readme.txt, and changelog files), help you with internationalizing your extra, and build the transport file for you automatically. If you plan on updating your extra over time, it's well worth learning, imo.

Hi Bob, thanks for your reply.

I'm trying to get familiar with myComponent as it made packaging a simpler task. But I need to build my component first and see it in action inside the manager, I still fail to do so.

I tried your suggested solution (regClient) and works great for CSS and JS. What about mixed pages of PHP, HTML and scripts? How to include that in my page? Keeping in mind that this is a template I cant change.

Thanks

24,544 Posts

BobRay Reply #4, 11 years ago

MODX doesn't allow mixed PHP and HTML in Resources, Chunks, or Templates, and pages like that are much difficult to maintain since the logic and the presentation are all mixed together.

It's usually easier than you'd think to put the HTML in a chunk and the PHP in a snippet that pulls in the HTML with $modx->getChunk().

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

Answered Building CMPs, Adding CSS and JS