Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

How to extend PageBuilder - Create own AddOns - Use J! Form Fields ?

Featured Lock Resolved Issue
Hello, just curious what's best practice to extend SP PageBuilder?

Is there any documentation or tutorial how to create custom AddOns? Any blank starter templates?
I also wonder about the backend and Form Fields: It seems, you have created your own "types"? There are no XML files involved. Why is this?
Aren't there many J! standard form fields that you could/should utilize and extend?

BTW, also found an "sppagebuilder" folder inside the HELIX3 template folder. What is the reason for this location?

Thanks in advance.

12 Answers

George Dunlop

More than a month ago #Permalink
This answer covers PB 2.x but the same principles can be applied to PB 1.x

@pepperstreet - No, during a PB uninstall, reinstall or update any of your custom files in that directory would be at risk of being lost. Instead I would recommend the following:

Custom Addon
As seen in https://www.joomshaper.com/documentation/joomla-extensions/sp-page-builder-2-x#documentation-5 create this directory: <sitename>/templates/<templatename>/sppagebuilder/addons/<customaddon>

Inside have the following structure (matching the new sppagebuilder 2 structure):
assets/images/icon.png
admin.php
site.php

If you have additional css / js for this particular addon you could potentially keep them inside:
assets/css/style.css
assets/js/script.js

Custom Type
Create: <sitename>/templates/<templatename>/sppagebuilder/builder/types/<customtype>/<customtype>.php
For custom styling and js, to keep it together, you could also create: <sitename>/templates/<templatename>/sppagebuilder/builder/types/<customtype>/assets/css/style.css
<sitename>/templates/<templatename>/sppagebuilder/builder/types/<customtype>/assets/js/script.js

Copy the contents of <sitename>/administrator/components/com_sppagebuilder/builder/types/text.php onto your <customtype>.php

In <customtype>.php replace

class SpTypeText{

with

class SpTypeYourtypename{


Then modify the code as you see fit.

Bring it all together
Go to <sitename>/templates/<templatename>/sppagebuilder/addons/<customaddon>/admin.php

Before

SpAddonsConfig::addonConfig(

Add

include_once (JPATH_ROOT . '/templates/<templatename>/sppagebuilder/builder/types/<customtype>/<customtype>.php');


So you would end up with


include_once (JPATH_ROOT . '/templates/<templatename>/sppagebuilder/builder/types/<customtype>/<customtype>.php');
SpAddonsConfig::addonConfig(...


This sort of matches how the file types are loaded in via <sitename>/administrator/components/com_sppagebuilder/builder/builder.php

Then in your field in admin.php

'name'=>array(
'type'=>'<custom type (all lower case)>',
'title'=>JText::_('TPL_<TEMPLATENAME>_SPPAGEBUILDER_LBL_<CUSTOMTYPE>'),
'std'=> ''
),


It may not be the best way, but for me it works.

I hope this helps others and helps to avoid tampering with the sppagebuilder core files.

Best Regards,

George

Rifat Wahid Alif - Staff

More than a month ago #Permalink
Hi,
in our template you will get site.php and admin.php file in 'templates/helix_template/sppagebuilder/addons' here you will get some of our custom addons for template specific. you can follow this anyone. here admin.php for admin fields site.php for frontend.

- Thanks

pepperstreet

More than a month ago #Permalink
1.) Location: Somehow, I expected to find the PageBuilder folder in MyTemplate/HTML/.... Either to create "Overrides" or even add new stuff.

2.) How to add missing/additional Form fields? For instance, a J! core Standard field like: Multi-Checkbox, Multi-Select Chosen style, or SQL field, or even the Tags field?

Rifat Wahid Alif - Staff

More than a month ago #Permalink
you will get field type here: 'administrator/components/com_sppagebuilder/builder/types'

- Thanks

pepperstreet

More than a month ago #Permalink
Rifat Wahid Alif wrote:
you will get field type here: 'administrator/components/com_sppagebuilder/builder/types'


Thanks, I have seen this collection. Why did you "re-invent" basic fields? Doesn't Joomla provide standard fields with the same and even more options? How to extend your field types? How to get multi-select features?

pepperstreet

More than a month ago #Permalink
Some more development questions (could not edit my previous comment, sorry)

If an AddOn needs an additional JS / CSS file. How to add external files? Where to place them?
What's best practice, if I want to distribute a new AddOn? Do users have to move/copy files manually? Any installation or upload possible?

Rifat Wahid Alif - Staff

More than a month ago #Permalink
you can keep your js/css file in 'components/sppagebuilder/assets/js' and 'components/sppagebuilder/assets/css',

- Thanks

pepperstreet

More than a month ago #Permalink
Rifat Wahid Alif wrote:
you can keep your js/css file in 'components/sppagebuilder/assets/js' and 'components/sppagebuilder/assets/css',


Sorry, got sidetracked.
Is this a secure location? I mean, what about PB deinstall, reinstall and updates. What about the current site template folder?
Would be nice to have a "blank AddOn" which can serve as a "template". Maybe including an installer package as an example.

pepperstreet

More than a month ago #Permalink
This answer covers PB 2.x but the same principles can be applied to PB 1.x
@pepperstreet - No, during a PB uninstall, reinstall or update any of your custom files in that directory would be at risk of being lost. Instead I would recommend the following:

It may not be the best way, but for me it works.
I hope this helps others and helps to avoid tampering with the sppagebuilder core files.

Best Regards,
George


Thank you very much for your thoughts and advice, George! Might come in handy!

Kawshar Ahmed - Senior Staff

More than a month ago #Permalink
So much for pagebuilder being friendly to create custom addons for.

Georg Klaißner

More than a month ago #Permalink
I reply here even without any solution in hope to get notifications on (hopefully) soon coming updates on this issue ;)

I recently ran into a similar situation providing a leaflet addon I made earlier to temporary solve issues due to troubles caused by Google's new map policy. While for me as dev myself there is no problem placing files and folders on correct places, a regular user might run into serious troubles ... specially also when there are additional langvars to add.

On one side I can understand Joomshaper not to support custom addons too much actively ... the available amount of them is one of their argument between the free and the pro version.

But just a thought: what if the pro version (and only the pro) would provide a nice addon install for custom made addons?

I think lot of dev's would enrich the functionality of pb and so raise the argument to switch to the pro version ;)

Greetz


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 103
Toufiq

Toufiq

Total Accepted Answers: 88
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 86
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 2
FUTURECLIENT

FUTURECLIENT

Total Accepted Answers: 2

115

Templates

295723

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us