About App Connect's UI controls reference guide length

Coffee Lounge
1

So you wanted to create App Connect extensions and have UI access?

meme

1 Like
2

image

3 Likes
3

Actually this is even a “short” version describing the core functionalities around the app Connect components only. We will be extending it as we cover more extensibility’s areas :slight_smile:

4

I need to train openAI on the UI controls reference guide sI can ask chatGPT things like: “what is the name of the option to add conditionally a script tag”

So I can get replies like: “it’s scriptInclude you dufus”

3 Likes
5

It’s not quite there yet but very impressive none-the-less. I tried this last night:

Q: How can I create components for Wappler?

A: Wappler is a powerful web development tool that allows you to create web applications visually. It also supports custom components that you can create and use in your projects. Here’s how you can create components for Wappler:

Create a new folder for your component in the “components” directory of your Wappler project.

Inside the component folder, create a new file named “index.html”. This file will contain the HTML markup for your component.

Create a new file named “index.js” in the same folder. This file will contain the JavaScript code for your component.

In the “index.js” file, define a new custom element using the document.registerElement() method. For example:

javascript

document.registerElement('my-component', {
  prototype: Object.create(HTMLElement.prototype)
});

This code creates a new custom element called “my-component”.

Inside the custom element definition, you can add event listeners and other functionality to your component. You can also define properties and methods for your component by adding them to the prototype object. For example:

javascript

document.registerElement('my-component', {
  prototype: Object.create(HTMLElement.prototype, {
    greeting: {
      value: 'Hello, World!'
    },
    sayHello: {
      value: function() {
        alert(this.greeting);
      }
    },
    connectedCallback: {
      value: function() {
        this.sayHello();
      }
    }
  })
});

This code defines a custom element with a “greeting” property, a “sayHello” method, and a “connectedCallback” function that is called when the element is added to the DOM.

Finally, you can use your custom component in your Wappler project by adding it to your HTML markup. For example:
perl
<my-component></my-component>
This code adds your custom component to the page.

That’s it! With these steps, you can create custom components for Wappler and use them in your web applications.

6

Well…if that is what ChatGPT produces I’m not afraid of losing my job yet :smiley:

2 Likes
7

Absolutely. But I still found it impressive considering it’s all so new. Not sure why it jumped to Perl at the end, either!

1 Like