Module creation workflow - Newbie

Temisola1

Hello all. I’m currently trying to build a custom module. I’ve been trying to wrap my head around it for a few days but I think I finally have a decent understanding. I’m not that familiar with node.js so my question might sound stupid. I understand that the MMM-ModuleName.js pretty much passes data or documents to the main html. Is it possible to have an html file with custom html already defined, a table of data for example, load it in your MMM-ModuleName.js using nodejs, modify the contents using the elementid and then pass that to the main html? As opposed to creating the html using nodejs. Again, I’m pretty green when it comes to nodejs please forgive me.

sdetweil

@Temisola1 here is my sample module,

https://github.com/sdetweil/SampleModule

the modulename, will create a small segment of content…

you can construct it multiple ways… even as an html string…

then on call to getDom()
in the wrapper div, you set the wrapper.innerHtml to your text html string.
if u only have text, there is wrapper.innerText

you can also create the elements one at at time thru code … document.creatElement(type)
and then append each to its proper parent (so it looks like the html string)…

then once u have created that (in getDom), you give it to the MM runtime (return wrapper)

and MM puts it into the page html tree in the right place (position: for module in config.js)…

u can see the document tree in the dev window elements tab
dev window via npm start dev, or ctrl-shift-i on keyboard on the MM screen

Temisola1

@sdetweil How can I construct ModuleName as an html?

sdetweil

@Temisola1 you cannot… it is a program… with a routine, called getDom() that returns the modules little bit of content for MM to display.

this part of my sample sets the content to display… u can make it part of an html document, a table, or paragraph…

// this is the major worker of the module, it provides the displayable content for this module
	getDom: function() {
		var wrapper = document.createElement("div");

		// if user supplied message text in its module config, use it
		if(this.config.hasOwnProperty("message")){
			// using text from module config block in config.js
			wrapper.innerHTML = this.config.message;
		}
		else{
		// use hard coded text
			wrapper.innerHTML = "Hello world!";
		}

		// pass the created content back to MM to add to DOM.
		return wrapper;
	},

u are sharing the page with all the other modules…

Temisola1

@sdetweil I think I see what your mean now. Can I do, for instance, something like

wrapper.innerhtml = "<h1>This is some random text</h1>"

sdetweil

@Temisola1 yes set the innerHtml to the html text string

Temisola1

@sdetweil Amazing. Thank you.