Custom Action on LuCI GridSection

Hello,

I'm not really experienced in js based ui creation, esp. so in LuCI. I have a JSONMap form based on (non-UCI) json data. Part of that data is displayed in a GridSection, each 'row' of which by default has an Edit button that opens the modal popup. When I change values in that modal and hit the Save button on it, the modal closes and the GridSection data is updated. What I would like to do is to extend the onClick action of that Save button, so that it preserves its current functionality but does some extra things.

My code looks like this:

  render: function () {
    var m, s, o;

		return this.get_my_data()
			.then(function (result) {
				var data = result.data;

				m = new form.JSONMap(data, 'some header', 'some desc');
				s = m.section(form.GridSection, 'listdata', _('title'));
				o = s.option(form.Value, 'propA', _('Prop A'));
				o = s.option(form.Value, 'propB', _('Prop B'));			
				return m.render();
			})
			.catch(function (error) {
				console.error(error);
			});
	}

As a guess, I think I would have to change the render function (of m, or s?), but I have no clue how to do that while keeping existing functionality. Any hint would be greatly appreciated!

Try overriding the maps handleModalSave() method:

render: function () {
		var m, s, o;

		return this.get_my_data()
			.then(function (result) {
				var data = result.data;

				m = new form.JSONMap(data, 'some header', 'some desc');
				s = m.section(form.GridSection, 'listdata', _('title'));
				o = s.option(form.Value, 'propA', _('Prop A'));
				o = s.option(form.Value, 'propB', _('Prop B'));		

				m.handleModalSave = function(...args) {
						// my custom actions

						return this.super('handleModalSave', args);
				};
	
				return m.render();
			})
			.catch(function (error) {
				console.error(error);
			});
	}
2 Likes

Many thanks for the hint! I got it working by modifying the handleModalSave method of s (the GridSection) rather than m.
Any chance I can easily extract the changed data, other than calling getActiveModalMap() and then looping the elements?

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.