Hi all,
I am using a Flex Repeater and I have created 4 instances inside it, which shows in a column. I want when i add my 5 instance it should shift to the another column. can you help me with the Flex repeater element styles how can i do it ?
this how it looks like.
Change the wrap property to something other than nowrap. You'll need to make sure that your flex repeater is tall enough for only 4 items to make it wrap.
def transform(self, value, quality, timestamp):
instances = []
for num in range(value):
instances.append({
"instanceStyle": {
"classes": ""
},
"instancePosition": {},
"instanceNum": num
})
return instances
Toolkit expression alternative:
forEach(
{../Slider.props.value},
asMap(
'instanceStyle', asMap('classes', ''),
'instancePosition', asMap(),
'instanceNum', idx()
)
)
It's time I started to play with your Toolkit.
Is there any handy way we can contribute sample code to get each other started? You have none as far as I can see. Or could we do it here with a thread per function?
Should we get an integration-toolkit tag added? You've done enough for IA!
Would the 3rd Party Modules section be the right place?
[
{
"type": "ia.display.flex-repeater",
"version": 0,
"props": {
"path": "Embedded/station/_stageToDel/Occupation",
"direction": "column",
"alignContent": "flex-start",
"useDefaultViewWidth": false,
"useDefaultViewHeight": false,
"style": {
"overflow": "hidden",
"key": "value"
}
},
"meta": {
"name": "FlexRepeater"
},
"position": {
"shrink": 0,
"basis": "50%"
},
"custom": {},
"propConfig": {
"props.instances": {
"binding": {
"type": "property",
"config": {
"path": "view.params.currentOccupation"
},
"transforms": [
{
"code": " def getBit(number, index):\n \tmask = 1 << index\n \tif number & mask:\n \t\treturn 1\n \telse:\n \t\treturn 0\n \t\t\n \n instances = [{\"fill\": getBit(self.view.params.currentOccupation,i)} for i in range(self.view.params.maxOccupation)]\n\n return instances",
"type": "script"
},
{
"code": "\tinstances = []\n\tfor i in range(self.view.params.maxOccupation):\n\t\tinstances.append({\"instanceStyle\": {\"classes\": \"\"}, \"instancePosition\": {}, \"instanceNum\": i})\n\treturn instances",
"type": "script"
}
]
}
},
"props.style.backgroundColor": {
"binding": {
"config": {
"path": "view.params.stateColor"
},
"type": "property"
}
}
}
}
]
can you see it here how can i fix it.
Because the above method doesn't work for me and i don't want the slider on top of it.
The slider was more for proving the point and allowing quick addition of instances for testing. You can omit that entirely if you want.
Based on your posted config you have not set props.wrap to wrap on the flex repeater. Do that first.
Hmmm. A tag makes sense, and I could create it, but I'd rather not abuse my L4 powers for self-dealing.
Y'all are welcome to send me snippets to add to the user manual... in markdown format like this forum.
Your element (instance) basis is set to shrink. Either change props.elementPosition.basis to 0 or change props.elementPosition.shrink to 0
How big are your instances if you set props.elementPosition.grow to 0? It might be that your normal instance size is much smaller and they are growing to fill the extra space. You could also try setting props.elementPosition.basis to 50px and see if they start to wrap.
Yes. Set the container height < 5 × repeated view height.
This is what is happening. Clamp the min size of your template instances to force it to wrap after 4 instances or clamp the height of the repeater itself.
If your templates are going to have dynamic content it may be hard to force it to always wrap after 4.
You can force the element height to be 25% of the flex repeater by adding a height property to the elementStyle property
So, something like this
"elementStyle": {
"classes": "",
"height": 25%
}
or you can also use calc() function if you're anticipating some padding or margin
E.g.
"elementStyle": {
"classes": "",
"height": calc(25% - 5px)
}
Hi Team,
Does anyone know if i want to reduce the space between the instances what should i do ?
for example if it is one it should look like this,
when it is 2 it should look like this,
when it is 3 it should look like this,
and on 4 or above it is good.
Based on a quick browse of the repeater props you posted earlier, it looks like the box size in each instance is being driven by the embedded view. Open the embedded view and tweak to your needs.
You likely have a label component with a margin defined on its style, or the root container of the embedded view has padding defined on its style.
The images you've shown in post #18 seem to show consistent spacing between the instances.
The height of the instances is changing.
