We’ve been inspired by all the great projects that we have seen since the release of 1.15. It was possibly one of our most feature-filled releases and has helped expand on project innovation and creativity within the product. One of these notable feature releases was the Repeat Container component, which repeated any objects put within it and dynamically updated the bindings with each row.
We tried it for ourselves!
We’re no strangers to ‘eating our own dog food’ (a phrase common in the software development world that means to use your own product). There are many Squirrel projects embedded as part of our website. For example, the price comparison matrix was created before the repeat container existed. This was crying out to be rebuilt using the new repeat container.
So we set about rebuilding the price comparison matrix to see how much quicker it it would be to construct.
A huge time-saver
The first iteration of the comparison matrix consisted of over 300+ components and took roughly 6 hours to build. This included building the spreadsheet, creating and binding the components, and grouping them into sections and layouts.
Taking what we had with the original project, we managed to drastically cut the number of components used. The time it took to implement the repeat container was significantly less, and created a more streamlined project.
We had to do some workarounds…
Initially, we hit a few small issues but nothing we couldn’t overcome. One such case was the mix of Text Label and Icon components in the first section, under “Usage”. Due to the nature of the repeat container, we knew that with each repeated row, it was not possible to change the component that was being “repeated”.
As such, we came to a compromise. Under each of the sub. columns we have – Free, Creator and Builder – we placed both a text label and an icon.
And now for the ‘magic’ that we call dynamic visibility!…
Knowing that the Text labels were the majority item shown in this section, we could go ahead and leave these as they are. We know that this is safe because one of the repeated spreadsheet sections was a series of blank cells. This meant that even if the labels were repeated, alongside the icons, it would just show the blank data!
Let’s take a look:
After this, we had to take the icons we had in our first row of components and set up the DV.
Now, we knew that these blank cells were going to be where our icons were showing. So, all we needed to do was say the following:
‘when this cell is blank, show the icon’
which was as simple as binding the icon’s DV Value to the same cell that the Text Label was reading from. As the repeat container then updated the bindings, it would read the cell below.
Used and approved by us!
The net result? A lot less time to build and a lot less components. We updated the matrix on the website… and you can’t even tell it’s changed!! However, this new version is more more dynamic and flexible and a way easier to maintain.
💙 Check it out here in our blog ‘Save time with the ‘Repeat-Grid’ component!’
