HTML rendering helpers for Models in Indico?

Development
1

Is there a way I could render a decent DataTable in Indico straight from a Model?

Something analogous to Forms, I guess?

Thanks!

2

No, you’ll have to do that yourself (I don’t think we use datatables anywhere). But AFAIK all you need to do there is creating a normal HTML table and then calling the datatables JS on that table.

3

Got it. How can I properly include the cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css and cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js statics in my plugin?

4

The cleanest option would be installing it with npm and including it in your JS bundle by importing it in your index.js file…

5

What about while developing? Same thing or can I just dump the DataTable JS files inside static?

6

Same during development.

BTW, if you run the build-assets.py script with --watch it’ll automatically rebuild whenever you save your own file.

7

For whatever reason Indico is restarting automatically any time I save a .py file inside my plugin folder. I guess for more “complex” stuff (like the dist/manifest.json from my previous thread) this is not sufficient, but so far it’s been working just fine for me.

8

If indico didn’t restart itself, any changes to your code wouldn’t actually show up…

9

Yes, I guess I was confused about the purpose of build-assets.py, as I thought that the Indico restart on every file save would suffice. I guess I now should know better :slight_smile: Thanks @ThiefMaster

10

When you say

your index.js file…

, do you mean some ‘global’ Indico JS file that I have to include my JS stuff in?

11

You have to create a client/index.js inside your plugin package folder and a webpack-bundles.json telling the build script where to find it. Check this plugin for an example: https://github.com/indico/indico-plugins/blob/master/ursh/webpack-bundles.json

12
  1. I then include the two DataTable .js and .css files inside that client/index.js file, correct?
  2. build script being build-assets.py, correct?
13
  1. yes, you can import the CSS file there as well to let webpack know about it
  2. yes
14

Great. Thanks @ThiefMaster

15

Hmm… I (think I) installed DataTables by running these commands:

npm install datatables.net
npm install datatables.net-dt

from Installation

The first one worked (I think), but the second complained:

root@user-VirtualBox:/home/user# npm install datatables.net-d
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/datatables.net-d - Not found
npm ERR! 404
npm ERR! 404 ‘datatables.net-d@latest’ is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2020-01-12T19_15_12_551Z-debug.log

Whatever the case (if installation was not successful of the DataTable core package, or not), how do I include an npm installed package inside the clients/index.js file? And how do I later refer to the DataTables stuff inside my plugin’s code? :frowning:

16

you have a typo there… that’s why your command failed.

If you just need it for its side effects (common for jquery plugins that add themselves to the jquery object), you just import it like this: import 'datatables';. Other modules that are proper ES6 modules and export functions would be imported using something like import foo from 'bar';

17

Yep :slight_smile: @ThiefMaster correct as aways :wink:

I had npm install datatables.net-d instead of npm install datatables.net-dt in the terminal :slight_smile:

But how does the system know to ‘find’ the datatables (npm installed) package from just a simple import 'datatables' command inside index.js?

18

npm install installs it into the node_modules folder, and imports that aren’t relative (./something) are looked up inside node_modules.

19

by Indico?

Also - is anything you put/include inside client/index.js automatically ‘injected’ by Indico into your templates, so that you can refer to it from inside a template?

For example, will inserting the JS portion of the following DataTable example DataTables example - Server-side processing directly inside one of my templates work at all?

Sorry, I am very new to this ecosystem, so I’m likely lacking some of the fundamental knowledge about the overall architecture of things (Linux, Python, Flask and above on the stack)

20

No, this is normal nodejs import behavior. Not specific to Indico at all.

You need to call self.inject_bundle() in the plugin’s init method to inject the plugin bundle into specific pages (identified by the WP class). Here is an example that injects the code everywhere. If you have CSS as well, you also need to call self.inject_bundle('main.css', WPWhatever). The main is coming from the key in webpack-bundles.json.

Sorry, I am very new to this ecosystem, so I’m likely lacking some of the fundamental knowledge about the overall architecture of things (Linux, Python, Flask and above on the stack)

Nothing wrong with that, everyone was a beginner once - I’d just appreciate people doing a little bit of research on their own. Don’t get me wrong, I don’t mind helping people extending Indico, especially when it comes to the part that are specific to Indico and not really well-documented.
But I guess you can understand that having to point out someone’s typos is not particularly pleasant, especially when there was an error message in the commands’s output that actually said “not found”.