Call another js widget in a new widget

Developers
#1

I have developed a js widget with a few parameters, e.g.

<$widget1 type="t1" data="d1" />`

Now I plan to develop another js widget, e.g.

<$widget2 filter="[tag[p]]" />

which will dynamically generate parameter values for widget1.

Could I call widget1 in the js of widget2?

2 Likes
#2

I you defined a custom widget in TiddlyWiki script, you can include one within another, keeping in mind widgets donā€™t typically return a value to the calling widget, but they can display a result or even an element like a button.

  • In tiddlywiki script you can even redefine an existing widget using the GenesisWidget

I do try to urge people to use the tiddlywiki way, not revert to JavaScript.

  • Especially in this example because it seems your outer widget is effectively what one can generate from a list widget.
#3

Thanks @TW_Tones. I understand it is better to use wikitext way to develop a new widget.

But some operation I plan to do is very complicated for data processing. It would be really hard to achieve through wikitext. So I think it would be easier to develop with js.

#4

this is done sometimes, an example is in the $list widget:

Here ā€œlistitemā€ is the name of the ā€˜childā€™ widget

1 Like
#5

@buggyj Thanks for your suggestions. After rethinking @TW_Tones comments, I think the following method would be easier and flexible to develop.

As my main target is to generate parameter values in widget1 using scripts, I could develop macros to return the generated values using wikitext for simple task and js for complex tasks, for example,

<$widget1 type="t1" data=<<get-data>> />

With this idea, I successfully developed a demo to display a map for my tw-htmlwidgets plugin as a starting point.

For example

<$htmlwidgets type="leaflet" data=<<data-leaflet "[tag[Place]]">> />

Which will generate a map to display capital cities in Australia based on filter [tag[Place]].

image
image1286Ɨ782 95.5 KB

I am mainly a R user which can easily generate dynamic figures using htmlwidgets packages with other js libraries (e.g. echarts, leaflet).

It is a big challenge for me to use js or wikitext to write/generate the json object used in dynamic figures.

My plan is to use R draw the basic figure for json object, then use wikitext/js to generate data to replace data in the base figure.

#6

You can make shared code a library (another type of JS tiddler, like widget type), and require it by tiddler title.

#7

Another option may be a custom filter written in JavaScript. I came across a discussion and example of js filter here : https://groups.google.com/g/tiddlywiki/c/M6wADVDjyTE?pli=1 (More info in TiddlyWiki/Dev under ā€œFilter Operatorsā€)

You use your js filter within a filter expression in wikitext to generate the output you need.

#8

@jacng Thanks. I am ending up with exact method through developing filter operators.

See my example to draw a leaflet map with filter operators (developing with proof of concept. https://tw-htmlwidgets.bangyou.me/).

<$htmlwidgets type="leaflet" filter="[addtiles[]] [tag[Place]addmarkers[]] +[leaflet[]]" />

I think this method is flexible and simple to add multiple layers into a single map.

#9

Just for an addition, I found a method .makeChildWidget(parseTreeNode, options) that could create a child widget and set the caller widget as its parent.

In the context of a widget (like in the file of your customized JS widget), call the method like the way below:

// Create a div node as the widget container
let node = $tw.utils.domMaker("div");
// Create a child codeblock widget
let widget_code = this.makeChildWidget({
  type: 'codeblock', // this should be added
  attributes: {
    code: '{"a": 1, "b": 2}',
    language: 'json'
  }
}, null);
// Render it
widget_code.render(node, null);

Ref: https://tiddlywiki.com/dev/#%24%3A/core/modules/widgets/widget.js

1 Like