Add Pop-up Help

[rayhooker]

I wanted to add the capability for a pop-up help text and wanted to solicit suggestions on the best way to handle that? I know how to format it but I want it to be defined as another option for the form elements. I guess it is possible to extend all of the form types I use to create a new form type such as was done to create "currency" as an extension of "number", but that is a lot work and code debt. Any suggestions on an approach?

Thanks,

Ray

[Anthropic]

Hi @rayhooker using the new builder it is possible to add a builder that adds an attribute or element and then add that to each item in the decorator that it is relevant for. That would be the easiest way to do it for everything.

[rayhooker]

Anthropic, That makes sense. I am sorting through the docs and examples. Is there an example of someone doing that, to add a field. I see examples to add new add-ons but not to modify an item in a decorator.

[Anthropic]

@rayhooker you would need to grab the decorator repo you are using and add it there, it isn't currently a built in option. The src/bootstrap-decorator.js file is the one that lists them all. I may convert this to an issue for adding the ability to apply a builder function to a list of types.

[rayhooker]

Okay so I think the fog is clearing. I already had noted the bootstrap-decorator file. That lists all of the standard decorator item. I also know the list of add-ons I have added to my project. Perhaps I have missed it, but other than editing the list of builders in each file, how can I add this new builder (e.g., "helptext" or "popuphelp") to the applicable items in the decorators?

[Anthropic]

The easiest way, if it applied to absolutely everything, would be to add it to the default builder list toward the top of the decorator file. Well you would probably do that anyway, but if it doesn't apply to everything then the function you add would need to confirm as its first action that it was a valid field type to append information to.

[rayhooker]

I am having trouble adding and triggering a new builder... I am using version 0.8.13 BTW. Though it is best to make changes to the development version of angular schema form and run gulp to build the version, as a test I was tracing the "dist" version. I added a new builder to builder (line 81) called popup help with the item to add it to at least one decorator item and test it:

popuphelp: function(args) { // Do we have a pop up help if (args.form.popuphelp) { console.log("Popuphelp: ", args.form.popuphelp);

  }

},

The question is how to add it to the decorator items. I tried tracing for "condition" that is triggered by an option in the form item. It appears that say adding an "condition" to an email field though triggers code in the old builder where the check is hardcoded and in line (e.g., line 568).

I see in the angular-schema-form-bootstrap-develop that the bootstrap-decorator.js has a defined list of builders for each decorator item but in the actual distributed versions of schema-form.js (or the minified version0 and bootstrap-decorator.js, I do not see any indication of mapping. What am I missing?

Ray

[Anthropic]

@rayhooker is may help to make a basic plunker so I can see what you have tried and suggest next steps?

[rayhooker]

Okay FWIW I loaded my currrent version and my changes to your dist versions of code at: https://plnkr.co/edit/mtVpJfLqlkEWPe5cbPHA?p=preview

As you can see, on line 89 of schema-form, I added a builder called "popuphelp" with only a console.log line to see what is passed. This is almost identical to the "condition" builder that processes a condition item on a form field. I also added a console.log in that builder.

It turns out that the legacy/ deprecated code is being called for "condition". For example, a console log on 589 shows that the current condition on the email form item does not use the new builder but the hardcoded if statement in the deprecated builder. Also my new code popuphelp is not triggered by the presence of the popuphelp on the "comment" form item.

Further I see none of the mappings for the builders to decorator items in this dist version of the code nor any indication how I might add the mapping. It does appear in the development versions of bootstrap-decorator.

Ray

[rayhooker]

BTW when I speak of mapping in the development version, I am referring to the following that does not appear in the dist version. Perhaps it is used by gulp to affect the same the final artifacts are built but I could not find evidence of this mapping in dist:

var defaults = [sfField, ngModel, ngModelOptions, condition]; decoratorsProvider.defineDecorator('bootstrapDecorator', { textarea: {template: base + 'textarea.html', builder: defaults}, fieldset: {template: base + 'fieldset.html', builder: [sfField, simpleTransclusion, condition]}, array: {template: base + 'array.html', builder: [sfField, ngModelOptions, ngModel, array, condition]}, tabarray: {template: base + 'tabarray.html', builder: [sfField, ngModelOptions, ngModel, array, condition, tabArray]}, tabs: {template: base + 'tabs.html', builder: [sfField, ngModelOptions, tabs, condition]}, section: {template: base + 'section.html', builder: [sfField, simpleTransclusion, condition]}, conditional: {template: base + 'section.html', builder: [sfField, simpleTransclusion, condition]}, actions: {template: base + 'actions.html', builder: defaults}, select: {template: base + 'select.html', builder: [selectPlaceholder, sfField, ngModel, ngModelOptions, condition]}, checkbox: {template: base + 'checkbox.html', builder: defaults}, checkboxes: {template: base + 'checkboxes.html', builder: [sfField, ngModelOptions, ngModel, array, condition]}, number: {template: base + 'default.html', builder: defaults}, password: {template: base + 'default.html', builder: defaults}, submit: {template: base + 'submit.html', builder: defaults}, button: {template: base + 'submit.html', builder: defaults}, radios: {template: base + 'radios.html', builder: defaults}, 'radios-inline': {template: base + 'radios-inline.html', builder: defaults}, radiobuttons: {template: base + 'radio-buttons.html', builder: defaults}, help: {template: base + 'help.html', builder: defaults}, 'default': {template: base + 'default.html', builder: defaults} }, []);

[Anthropic]

@rayhooker that code comes from the decorator. In the new version I am working on I have added version number to the code because in a situation like this I have no idea which version you are working with, but it isn't the current one. It may be that npm is out of date, but if you look at the documentation for defining-a-decorator you will find that it loads sfBuilderProvider. Take a look at the current bootstrap-decorator.js and you can see how a function can be added and then joined into the array that operates on the template fragment.

[rayhooker]

Oh my, you are correct! What happened is that bower (not sure about npm) continued to deliver the old bootstrap-decorator.js (and min version) with the notification "WHERE_IS_BOOTSTRAP_DECORATOR.md". So I did not notice it had moved and I should also install the new one. I will double check that the other artifacts were updated but I think it just did not remove the old bootstrap decorator files.. so I continued to use those. I have pulled in the new files and the builders are now being fired... so now to work. Thanks..

[Anthropic]

Is it bower version 0.8.13?

[rayhooker]

Actually it looks like bower only has 0.8.12.. hmmm. I will make sure I get 0.8.13 for sure. BTW I explicitly asked for 0.8.13 and received "not found".

[Anthropic]

Ok I will look into it, maybe didn't publish as expected

[rayhooker]

BTW it looks like npm is up to date but bower is out of sync. I already started using npm for some of my testing framework, and perhaps should switch to it. At least for base schema-form I am using npm.

[rayhooker]

I got everything working quickly with the proper versions. Basically the approach is almost the same as condition builder exception that I insert a button after the form item label with call to toaster passing the help text string. This does require me to make constant updates to the base code when every a new version of schema form comes out. I am not sure how to make it stand alone. So any input on:

• How could I make it stand alone or is this something I could propose as an update to base, perhaps an alternative to the current help field?
• Do you have any thoughts on a way not require as many dependencies? Right now I need toaster added to the Angular module and to insert to imbed an anchor for the popup. I also need to pass toaster to the controller and since my code runs where there does not appear to be a handle to the scope, I had to configure and store a reference to toaster as window.toaster.

Here is how to use it: { "key": "comment", "type": "textarea", "placeholder": "Make a comment", "popuphelp": "This is help text" }, Here is a screen shop where I clicked the icon several times. As you probably know this pops up a window that goes away:

[Anthropic]

@rayhooker well what I was saying earlier is that at the moment there isn't an easy way to make it future proof, however I am working on a method for appending/prepending builders to specific fields, that would make it much easier. I will make a new ticket fo ryou to be able to follow, if it isn't in the next release it will be in the one after that.

[Anthropic]

In the meantime I can't see many changes happening to the latest decorator file so you shouldn't have to make many tweaks to that if the builder is stand alone enough.

[Anthropic]

Please re-open if you do not feel the question has been answered sufficiently.