Add widget settings in backoffice

  • Hey guys!


    I've started to create my own widget, which should have options on the backoffice under "Edit widget --> Settings". The problem i have is that only one (default?) input field is shown, named 'title'.


    In Chrome inspector i found out that my custom widget's js file isn't loaded, because the src-path isn't correct: src="rattox:js/widget-jarallax.js"


    I tried to follow the steps in the documentation, but i dont know how to fix this.


    First of all, my theme tree:




    And my curret result looks like this:

    Only one input field is visible and the src of the the script file is wrong.




    Does anybody knows what i'm doing wrong? I tried to compare system widgets with my own, but i have no clue what i'm doing wrong :(

  • SPQRInc

    Approved the thread.
  • Hi RaTToX welcome,


    https://github.com/Pastheme/dp…30d9929ef69b/index.php#L9


    https://github.com/Pastheme/dp…d9929ef69b/index.php#L138


    You have to enter the name of the project.


    Code
    1. Project Repository: pastheme
    2. Project Name: dpnblog
    3. index.php =>
    4. 'name'=> 'dpnblog'
    5. $view->style('exampleStyle' , 'dpnblog:assets/css/master.css');
    6. $view->script('exampleJavascript' , 'dpnblog:assets/js/master.js');


    The name of the project and the folder name must be the same.

  • Thanks for your response, yns.wtf!


    I just tried to rewrite my code correctly, but i think i didn't understand you.


    My (theme) files are located unter kai/packages/rattox/the-video-guy (See screenshot from above).


    I updated my index.php as follow:

    In your code is the option 'autoload' => ['Pastheme\\Blog\\' => 'src']. If this is necessary; What would it be in my case? ?(


    And i've updated my widgets/jarallax.php:


    But nothing really changed :/ The result in the DOM:

    <script src="the-video-guy:app/bundle/widget-jarallax.js"></script>


    If i change the widgets/jarallax.php to the following, the result is slightly different:

    PHP: widgets/jarallax.php
    1. $scripts->register('widget-jarallax', 'the-video-guy/jarallax:app/bundle/widget-jarallax.js', ['~widgets']);

    Result:

    <script src="/projects/kai/the-video-guy/jarallax:app/bundle/widget-jarallax.js"></script>


    I don't really know what's going on.

  • Well yunus gave you just a sample code from him that was seems to be fiting to the topic. The way you try to bind your js script file is only possible in the views php files. If you want to register them during installation you need to use the similar code from SAB or as i did posted in one thread. Of course you need to make some changes to fit to your situation.


    unfortinately i have never tried a widget for the backend probably the path shortcuts are slightly different. Maybe SAB has an idea as he is a guy who knows pagekit very well, but in cases of leaking documentation we sit all in same boat. -_-

  • I never coded widgets ... but:


    According to the docs, you should add your script only in your jarallax.php, not in the index.php too.

    The shortcut is not related with the widget name, only with the name of extension.


    But path resolving is weird, can't explain that. RaTToX What does your index php currently look like? What paths do resolve and which not?

    The LORD is my strength and my shield; in him my heart trusts, and I am helped; my heart exults, and with my song I give thanks to him. Psalm 28,7


  • My theme folders index.php looks currently like this:


    And my jarallax widget file (placed in my theme folder) looks like this:

    Instead of the-video-guy/jarallax:app/bundle/widget-jarallax.js i can write something like packages/rattox/the-video-guy/app/bundle/widget-jarallax.js, but i don't think that this is the correct way. However my inspector will give me than the following error message:

    Code
    1. widget-jarallax.js?v=8799:101 Uncaught TypeError: Cannot read property 'components' of undefined
    2. at Object.<anonymous> (widget-jarallax.js?v=8799:101)
    3. at __webpack_require__ (widget-jarallax.js?v=8799:20)
    4. at Object.<anonymous> (widget-jarallax.js?v=8799:49)
    5. at __webpack_require__ (widget-jarallax.js?v=8799:20)
    6. at widget-jarallax.js?v=8799:40
    7. at widget-jarallax.js?v=8799:43
  • Do you have a webpack.config.js file in your package?


    with something like that


    you have of course to compile your package before packing it with webpack then, at least once till you make changes on your .vue files


    The error says just that you don't have any objects in components property. But still it is not clear for me do you want to make a widget for backend or frontend? Because if it is a regual extentsion for frontend you can add pretty easy the config tab in the backend. Just look at the sample extension from yootheme on github.


    https://github.com/pagekit/example-todo


    or better this blueprint:


    https://github.com/pagekit/extension-hello


    Regards,


    Fossy

  • Did you exactly use this statement at the end of your vue file (inside script tag):

    window.Widgets.components['my-widget'] = module.exports;


    Cannot read property 'components' of undefined usually comes from the line above. I guess somehow window.Widgets is undefined.




    Is every script (and especially your script) loaded after widgets.js?


    Is it possible, that you drop your code here as zip? the I'll take a look. I think there is somewhere a typing mistake ...

    The LORD is my strength and my shield; in him my heart trusts, and I am helped; my heart exults, and with my song I give thanks to him. Psalm 28,7

  • Thanks for your comments! And sorry for the late response :huh:



    Yes, my webpack.config.js looks similar to this, except the js-loader, and everytime i updated my vue-file i run the webpack command.


    I want to build a parallax widget for the frontend with configurable options in the backoffice (like the 'hero-banner'). It should have a file picker to select a image or video file for example. These options should be available in the "edit widget" page in the tab "settings". I dont want to create a new tab if that is possible.


    Thank your for the github links, i'll take a look at them, but probably not before the weekend :rolleyes:



    window.Widgets.components['theme'] = module.exports;

    This is the statement i wrote into the vue file. I thought ['theme'] was for the part where to output my vue template ?( I guess i'm wrong.

    Every other script is loaded correctly. Only my script's src-path isn't correct.


    Yes, i uploaded my current status here. Please keep in mind that i'm at the beginnig of my theme and widget, so currently there aren't any controller for my widget.


    I think there are some namings wrong and parameters are missing. :|


  • https://github.com/pagekit/extension-hello


    This one is really helpful, you could start your extension out of it, as it is a very small blueprint with wiget registration in the menu, as a config page on board. Not much function there, well almost no function but it's a blueprint right?


    I started actually to my frist attempt on a small contact forms extension directly out of this one and it's really easy to customize to your own widget, especially if you have already some function in your actual you could get pretty far to a backend config for your extension.

  • Got it working, i appended the change package.


    There where two main mistakes:

    1. As your package is a theme, shortcuts like extension-name: and extension-name/views: are not registered (they are only valid for extensions!), you can simply use theme: or views:
    2. The name of your widget (defined in index.php with 'name' => 'myWidget') and which name you register your vue component are connected. To get your widget visible, use window.Widgets.components['my-widget:settings'] = module.exports. The first part my-widget has to be the kebab case version of your widget name. (kebab case: myNameIsSimon -> my-name-is-simon or my/widget -> my-widget)

    Beside, remember that scripts for a widget only has to be registered in the appropiate .php widget file. The widget-theme component is only a tab in the widget edit view (therefor show on every widget type) and this kind of script has to be registered in your index.php.

    Files

    • rattox.zip

      (4.17 MB, downloaded 7 times, last: )

    The LORD is my strength and my shield; in him my heart trusts, and I am helped; my heart exults, and with my song I give thanks to him. Psalm 28,7

  • Thank you SAB ! Now it looks like what i've wanted.
    If im right you have change the following files: index.php, jarallax.php and widget-jarallax.vue


    1. As your package is a theme, shortcuts like extension-name: and extension-name/views: are not registered (they are only valid for extensions!), you can simply use theme: or views:

    Ok, so you changed in the jarallax.php the Widget name and the parameters for $scripts->register to

    $scripts->register('widget-jarallax', 'theme:app/bundle/widget-jarallax.js', ['~widgets']);


    1. ...
    2. The name of your widget (defined in index.php with 'name' => 'myWidget') and which name you register your vue component are connected. To get your widget visible, use window.Widgets.components['my-widget:settings'] = module.exports. The first part my-widget has to be the kebab case version of your widget name. (kebab case: myNameIsSimon -> my-name-is-simon or my/widget -> my-widget

    I'm a bit confused. 'name' => 'myWidget' in the index.php in the index.php is the name of the theme, isn't it? Did you mean the jaralaxx.php in my case? If yes it would sense to me ^^


    Beside, remember that scripts for a widget only has to be registered in the appropiate .php widget file. The widget-theme component is only a tab in the widget edit view (therefor show on every widget type) and this kind of script has to be registered in your index.php.


    Ok, that's why you uncommented the widget-jaralaxx in the index.php.


    Thank you very much. Now it's more clearly understandable for me :):thumbup:

  • I have one question to the filepicker, which i've copied from the hero banner widget:

    How can i select / whitelist other filetypes? For my plugin i want to select images or video files, like webm. I can select it, but i'm not able to save the selection. I've added various filetypes under the System page, but this doesn't help. Does anybody have an idea?