Forms Designer Version 3.3.9 Accordions

How do we callout accordions now in the new version of designer? By Title?

// Show Accordion13
		$(fd.container('Accordion13').$el).hide();
        } else {
// Hide Accordion13
		$(fd.container('Accordion13').$el).show();

Hello @shedev,

You need to click on the entire container to see its name:

To show/hide Accordion, please use this code:

//hide container
fd.container('Container1').hidden = true;

//show container
fd.container('Container1').hidden = false;

That is what's missing in my app when clicking on the banner.

And FINALLY - when clicking on the BOTTOM of the bounding box (not the + itself, but just to the right of it), I can see the GENERAL controls.

But my code to hide the accordion that worked Designer 2.x no longer hides the accordion.

//This shows or hides Staff Accordion based on specific logged-in users

fd.spRendered(function() {


    var currentUserLoginName=_spPageContextInfo.userLoginName;
    var arr = ['user1@domain.com', 'user2@domain.com', 'user3@domain.com, 'user4@domain.com', 'user5@domain.com', 'user6@domain.com'];

    function enableOrDisableAccordionTabs() {

        if (arr.indexOf(currentUserLoginName) >= 0) {

                // Enable Staff Only Accordion
                fd.container('Accordion2').$children[0].disabled = false;

            } else {

                // Disable Staff Only Accordion
              fd.container('Accordion2').$children[0].disabled = true;

            }
    }

    // Calling enableOrDisableAccordionTabs on form loading
    enableOrDisableAccordionTabs();
});

//=========> Staff Only Information Section

Dear @shedev,
The clicking behavior is expected, as you're now able to configure settings for individual sections, to select Accordion as a whole, click anywhere below, doesn't have to be close the + button, you can click to the right as well:
image

As for the JavaScript code, it should still work, nothing has changed here - please, try to remove the rest of the code, maybe the error is somewhere else, and if it still doesn't work - check browser's console for errors.

@Nikita_Kurguzov

I finally am at a place to reach back and update this ticket. I will say, the update from the designer V2.X to V3.X is lovely. The V3 interface is beautiful and the tools and behavior of the app are not as glitchy as with V2. I appreciate that it would take a bit of intention now to delete a form set where in V2 the trashcan icon was so close to the form set drop menu. As small as that change may seem, it is fantastic.

Another V2 stressor was the random shifting of the designer workspace when clicking an accordion for example. This caused many inadvertent control dislocations and offered many opportunities for accidental deletes of controls. Again, this may be insignificant for some, but it created so many extra hours of development.

The slider to reposition the default form set is also very nice. I like it and will be experimenting more to learn about what multiple form sets can do for us. I already see a great use case for testing new layouts without exposing them to the end user; I have a nice POC in the works for a demo and it isn't causing any problems or conflicts as it is not yet shared via permissions or by default.

Ah yes - and the copy/paste functionality is welcomed; it is very handy for banners that have unique words but the same styles. It's a good thing.

Having used your product now for several years, I feel like I am slowly becoming better at using its resources - there are many from which to choose. Thank you again for your wonderful support and guidance in teaching the Plumsail community how to make beautiful apps and tools for our myriad populations.

While researching the jump from V2 to V3, all indications were that the process would not cause any negative impact. While that is partially true, I have learned a lesson about keeping up with the app package versions in the SPO App Catalog. The move to the latest app package (widgets, etc) was the cause of all of my issues with JS breakage and odd behaviors.

Essentially, I had to (on every form I have in use) backup the JS/CSS/Config and delete the form contents. From a blank slate (empty views), I worked through each block of code, testing line by line to recreate the desired functionality that my users expect. I was pretty stressed for a week or so as this impacted production and staging environments and took a lot of time to correct as I also learned how to navigate the new V3 IDE.

If anyone out there is still using an older app package version and/or V2, just prepare accordingly. It's worth the work, but it requires work and time.

2 Likes

Dear @shedev,
Thank you for the feedback! I'll share your beautiful words with the dev team, they'll be happy to hear the feedback :blush: We're happy to grow and improve, please, share any and all feedback with us!

While I can't promise it will be implemented right away, but we always have eyes to see and ears to hear all the requests that we get :smiley: We'll continue doing our best to stay on top of the game, and continue improving the product!

As for anyone updating, you're right: there can be issues with JS and CSS customization, and the longer one waits - more changes accumulate, and more challenging is the update. Try to keep your version up to date, and contact our support team at support@plumsail.com if you experience any challenges.

1 Like