1. Fabrik 3.9 has been released. If you have updated Joomla to 3.9, this is a required update.
    Dismiss Notice

Custom save / submit button

Discussion in 'Community' started by Bren, Feb 9, 2019.

  1. Bren

    Bren Member

    Level: Community
    Hello all.
    I've been using the Fabrik content plugin more within Joomla articles. I've also been using a nice extension called Page Builder CK to add tabs, buttons, etc on the fly within Joomla articles. Using Page Builder CK; I have an article that has some tabs where the 1st tab has a content plugin of the edit form of a record and the next tab has a sub list of the record on the 2nd tab. Then I used Page Builder CK to add a button to close the page and return to the parent list that the edit form comes from. What I would like to do is add to this button, that Page Builder CK created, to also be the Fabrik edit form save / submit button and then hide the default Fabrik button in Fabrik form settings. Is this possible? If so, how?
    Thanks in advance.
     
  2. lousyfool

    lousyfool Active Member

    Level: Community
    Hi,
    Guess you'll want to keep the form buttons functionality and only want to change their appearance/style?

    If so, you can use (custom) CSS, of course, or create an override and add whatever classes Page Builder CK is using to the buttons:
    - Copy "/components/com_fabrik/layouts/fabrik-button.php" to "/templates/YOUR_TEMPLATE/html/layouts/com_fabrik"
    - Edit the copy and add your classes.

    The concept: http://fabrikar.com/forums/index.php?wiki/jlayouts/
     
  3. Bren

    Bren Member

    Level: Community
    Thanks for sharing; but I actually want to copy the functionality from the default Fabrik form save button to this button, that Page Builder CK created. The reason why is because I have this custom button on the same article page as the form; but outside / below the tabbed area that Page Builder CK also created. If a user goes to the 2nd tab, where the sub list is, then there is no save button and the custom button, that Page Builder CK created, is all that is seen and works well; but if the user changed something on the form before going to the 2nd tab, then the form changes may not be saved if the user clicks on only the custom button. If this custom button also saves the form changes then I could hide the default save button. Is there any way to copy the functionality of the default save button to the custom button, that Page Builder CK created, in the article? If so; how?
    Thanks in advance.
     
  4. lousyfool

    lousyfool Active Member

    Level: Community
    Ah ok.
    Let's forget the page builder for a bit, because technically you want multiple form submit buttons on what happens to be the same page, even if tabbed.
    Can't see how this would be possible without major trickery. Simply creating a second identical button will hardly work... it has an ID, and you must not have multiple elements with the same ID on a page.

    How about placing the form into the list's intro or outro (or vice versa: the list into the form's intro or outro)? That'll work, it'll all be on one page, except you won't have tabs.
    If you insist on tabs, with some customization you might achieve a tabbed form where one tab contains the list. You'll have to watch out for not ending up with a <form> inside a <form>, etc etc. Again, major trickery...
     
  5. Bren

    Bren Member

    Level: Community
    That should work. Brilliant. I keep forgetting about the Intro & Outro sections.
    I just tried adding my sub-list content plugin below (which works fine in an article) to the group outro; but when I try it on the frontend it doesn't appear. I placed the word "Test" before it and that's all that would display at the bottom of the form is "Test". I tried the same in the group intro & the form intro/outro with the same results.
    Code (Text):
    {fabrik view=list id=35 bw_pos___fid_dbjoin_raw=[rowid]}
    Any idea why my sub-list won't work in the intro/outro sections?
    Thanks in advance.
     
  6. lousyfool

    lousyfool Active Member

    Level: Community
    You must place the list into the form intro or outro. (If you'd do so in the group, you'll have <form> inside <form> = invalid HTML.)

    Edit the form -> tab "Options" -> set parameter "Process Joomla plug-ins" to something including the form.
     
  7. Bren

    Bren Member

    Level: Community
    Awesome! It works. Problem solved. Thank you, I greatly appreciate it.
     
  8. Bren

    Bren Member

    Level: Community
    Oh, I just noticed an issue where the sub-list won't work to add records to it if the parent record is being added; obviously because the parent record does't have an id, yet, to relate the sub-list to. Is there any way to hide the form outro or my content plugin sublist within the form outro if the form is an add versus an edit? If so, how?
    Thanks in advance.
     
  9. Bren

    Bren Member

    Level: Community
    Last edited: Feb 11, 2019
  10. Bren

    Bren Member

    Level: Community
    Well, looks like I was mistaken. The sub-list displays nice in the outro below the form; but when I click the add button and add a record then the sub-list doesn't list the new record. When I dug deeper, the record was added to the PO list; but without the join (related data) to reference it to the parent form. Is this a bug with the content plugin because the same sub-list works fine within an article that's referenced from a custom link on the same parent list? If not; am I missing something?
    Thanks in advance.
     
  11. lousyfool

    lousyfool Active Member

    Level: Community
    Hmm, maybe it's about time to ask:
    What are you trying to do?
    What's a "sub-list", what's a "PO list"?

    Just BTW, in your line
    Code (Text):
    {edit: {fabrik view=list id=35 bw_pos___fid_dbjoin_raw=[rowid]}
    as quoted above you seem to be missing a closing }
     
  12. Bren

    Bren Member

    Level: Community
    Same idea as the beginning of this thread; but minus the tabs. I went with your suggestion with using the form outro to display a sub-list (related data); which happens to be called POs (short for Purchase Orders). Basically, each record of the parent list are projects; which happens to be a list called “projects” and a purchase agent notes/adds one or many material purchase orders to each project record. The form is the details of a project record and the sub-list in the outro section displays the POs sub-list. They are joined properly in the recommended related data way (that’s how we currently update POs per project; but it would save a step putting the editable list on the same page as the form). So, yes, it works; but adding POs in the outro within the {edit: } doesn’t work. Strangely, I added the last }; but then removed it because it would appear in the outro with the POs sub-list so I assumed that the last } was ignored... Not sure if this is a clue to the issue or not. Any suggestions? Thanks in advance.
     
    Last edited: Feb 13, 2019
  13. Bren

    Bren Member

    Level: Community
    I played around with it a bit more and turns out that you were right again. The missing closing } was the reason for it acting strange with additions. I've added the closing } again and it works fine; but the closing } still appears during parent form additions... I added some formatting to make it not quite as obvious; which then added something else interesting after I added something similar to the intro. Basically, when I add some HTML formatting tags in the intro, it also gets applied to all element labels and the outro (even with closing tags). To compensate, I added different tags at the end of the intro to put everything back to what it was. Not a big deal; but the visible } in the beginning of the intro & outro is annoying. Wish that could go away somehow. Any ideas?
    Intro
    Code (Text):
    {edit:<h1><span style="color: #3267fe;">{fabrik view=element list=6 rowid=[rowid] element=bw_projects___sitename}</span></h1>}<h4><span style="color:black;">{new: <span style="color: #3267fe;"><h1><b>New material shelf job</b></h1>}<h4><span style="color:black;">
    Outro
    Code (Text):
    {edit: <h4><b>MRs, POs &amp; Transfers</b></h4>{fabrik view=list id=35 bw_pos___fid_dbjoin_raw=[rowid]}}{new: <h4><b>MRs, POs &amp; Transfers can be added after first saving this new material shelf job</b></h4>}
    Thanks in advance.
     
  14. lousyfool

    lousyfool Active Member

    Level: Community
    Glad to hear you got it working -- technically.

    You need to review your HTML, obviously. Specific HTML tags have specific purposes, plus your template and other CSS are applying to them, too. In the intro you even have invalid HTML as the <h4> and <span> after the list are not closed properly.

    <h> header tags are playing a special role, so I'm not surprised you're getting funny results when wrapping a list into them. Using <span> as a child of <h> and parent of the list is neither recommendable nor making sense. If you, for some strange reason, insist on wrapping the list into an <h>, you could apply the in-line CSS to the parent <h> tag instead.
    So, if anything, you should drop all that and instead use a <div> tag for enclosing the list, either with in-line CSS (of course applying to most everything inside), or better with a special class. However, even this should is not necessary for the lists as they do have specific classes and unique IDs, so you can always target them with dedicated CSS.

    So, my advice:
    1. clean up and use proper HTML, if any
    2. for styling, use CSS (not <h> tags), best either in your template's custom.css or in Fabrik's custom_css.php
     
    Last edited: Feb 14, 2019
  15. Bren

    Bren Member

    Level: Community
    Yes, I probably should be making a custom Fabric template and using custom CSS instead. I’m planning on it in the near future; but, as mentioned, the formatting actually looks fine for now. Ya, the open tags at the end I had to do to get it looking OK; but I’ll try adding some Div tags to clean it up for now. Regardless, if I remove all of the tags and just apply the basics with my content plugin / place holders within the {edit: } then I always still have a visible } displaying in both my intro & outro only during a form addition. During a form edit the } is gone. Either way everything works as expected. It seems like there may be a bug during form additions using {edit: } that a } is displayed. Try it and I bet you’ll see it to. Not a big deal just visually annoying...
    Thanks in advance.
     
  16. lousyfool

    lousyfool Active Member

    Level: Community
    Sorry, seems you just lost a bet: I can't reproduce. Just tried all of this in both intro and outro of a form:
    Code (Text):
    {new: <div>{fabrik view=list id=22 j_bc_cats_avl___id=2}</div>}
    {new: {fabrik view=list id=22 j_bc_cats_avl___id=2}}
    {new: {fabrik view=list id=22}}
    {edit: <div>{fabrik view=list id=22 j_bc_cats_avl___id=2}</div>}
    {edit: {fabrik view=list id=22 j_bc_cats_avl___id=2}}
    {edit: {fabrik view=list id=22}}
    Result: each one displaying perfectly fine, not a single stray } or other erratic stuff anywhere in the HTML output.
    Also, there's nothing in /components/com_fabrik/models/form.php in the "parseIntroOutroPlaceHolders" function which could indicate such left-over }.

    You never said which Fabrik version you're using but, just in case, perhaps you want to make sure it's the latest from Github.
     
  17. Bren

    Bren Member

    Level: Community
    That’s good news. I’d rather there wasn’t a bug; but something I may be doing wrong on my end. Ya, I’m probably due to get a current update; though I’m not far behind. I’m using Joomla 3.9.1 & Fabrik 3.9 (last updated in early January I believe). I’ll try a current update before digging deeper into what I may e doing wrong. Thank you and I really appreciate it.
     
  18. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community

Share This Page