How to add html elements with custom script

[ni3aswal]

I'm trying to add a create a function that has multiple usage of double quotes and single quotes along with `
but I'm restricted to keep everything inside single quote in the expression as per the documentation.
so I have to again update my code to escape all quotes , that too doesn't work.

[ansibleguy76]

can you show me? have you tried

expression: >
  .... your function

this is yamls way of multiline.
no double quotes required.

[ni3aswal]

I'm trying to add an html component in my form

playbook: dummy.yaml
name: Test
type: ansible
fields:
  - type: html
    name: alert
    expression: >
    function helloworld()
    {
     alert("hello world")
    }
    '<button onclick=helloworld()>click me</button>'

it says hello world is not a function. 

[ni3aswal]

No mate, I'm just trying to implement some dynamic events on the html elements we're adding.
using html type we're only able to add html and css, no option for javascript?

this was just an example that I posted, i want to load javascript along with my html/css code.
since scripts can only go in head/body , its not working. the javascript is not loaded in the rendered html at all.

So how do you add life to the html buttons/tags/elements that we're adding ?

[ansibleguy76]

I understand... Meanwhile I'm on my pc, let me try to make a working sample (if possible)

[ni3aswal]

I understand... Meanwhile I'm on my pc, let me try to make a working sample (if possible)

I'm available to join you on call if needed, I am using html only. but its just a non-living button then. we cannot do anything to it if js is not supported.

[ansibleguy76]

icon: bullseye
fields:
  - name: sample
    type: text
    default: Ansibleguy
  - name: field1
    type: html
    expression: >
      ((btn,msg)=>{
        window['myprefixFn'] = new Function(
          `
          return alert("Hi there ${msg}")
          `,
        );
        return `<button onclick="window.myprefixFn()" class="button is-success">${btn}</button>`;
      })('my button','$(sample)')
      

[ansibleguy76]

I got this working...

some tips :

• add ";" after every line, it will be joined to 1 big string and executed
• when creating a function, add to window to make it global and use the function constructor
• wrap everything in (()=>{})()

[ansibleguy76]

I know, it's a big hack. But this framework wasn't build for this use-case. And I'm not sure what you are trying to do and if it will work.
static html you can also just load from a file, that would be easier. but it won't be dynamic.

[ni3aswal]

Yeah for now to add it dynamically , was adding a style/body/button tag and writing the whole as an inline function and onload was executing it provide dynamic hands and legs to the elements, will try the suggested approach too. thanks mate.