🙏 Table colors and Grid issues

[Cicorione]

Hi @pgundlach, I have had time to work this week and I got decent results because all of your help so far. 🤝

I am at decent point however I am stuck with a silly issue that I can't figure out a solution.

I have a table where a new column appears to highlight the item as "NEW", the code works but I can't pass the color and I don't understand why.

Also I would like to know if it is possible tracing the grid inside a group; I followed your suggestion so now I am using a rough grid to lay out my "items" and a refined grid to have more control inside each group, but I can't see the inner grid and I would like to know what it is actually happenings in there, thanks!

Now the code:

data.xml

<data>
  <animals title="MAMMALS">
    <item>Baby Dog</item>
    <item>Baby Cat</item>
    <item>Baby Horse</item>
    <item>Mommy Dog</item>
    <item>Mommy Cat</item>
    <item>Mommy Horse</item>
    <item>Daddy Dog</item>
    <item>Daddy Cat</item>
    <item>Daddy Horse</item> 
  </animals>
  <animals title="BIRDS" new="true">
    <item>Baby Eagle</item>
    <item>Baby Flamenco</item>
    <item>Baby Vultur</item>
    <item>Mommy Eagle</item>
    <item>Mommy Flamenco</item>
    <item>Mommy Vultur</item>
    <item>Daddy Eagle</item>
    <item>Daddy Flamenco</item>
    <item>Daddy Vultur</item>
  </animals>
  <animals title="FISHES">
    <item>Baby Shark</item>
    <item>Baby Betta</item>
    <item>Baby Tuna</item>
    <item>Mommy Shark</item>
    <item>Mommy Betta</item>
    <item>Mommy Tuna</item>
    <item>Daddy Shark</item>
    <item>Daddy Betta</item>
    <item>Daddy Tuna</item>
  </animals>
  <animals title="REPTILES"  new="true">
    <item>Baby Lizard</item>
    <item>Baby Turtle</item>
    <item>Baby Crocodile</item>
    <item>Mommy Lizard</item>
    <item>Mommy Turtle</item>
    <item>Mommy Crocodile</item>
    <item>Daddy Lizard</item>
    <item>Daddy Turtle</item>
    <item>Daddy Crocodile</item>
  </animals>
  <animals title="AMPHIBIANS">
    <item>Baby Frog</item>
    <item>Baby Toad</item>
    <item>Baby Salamander</item>
    <item>Mommy Frog</item>
    <item>Mommy Toad</item>
    <item>Mommy Salamander</item>
    <item>Daddy Frog</item>
    <item>Daddy Toad</item>
    <item>Daddy Salamander</item>
  </animals>
  <animals title="INSECTS" new="true">
    <item>Baby Ladybug</item>
    <item>Baby Spider</item>
    <item>Baby Dragonfly</item>
    <item>Mommy Ladybug</item>
    <item>Mommy Spider</item>
    <item>Mommy Dragonfly</item>
    <item>Daddy Ladybug</item>
    <item>Daddy Spider</item>
    <item>Daddy Dragonfly</item>
  </animals>
</data>

layout.xml

<Layout xmlns="urn:speedata.de:2009/publisher/en"
	xmlns:sd="urn:speedata:2009/publisher/functions/en" >

  <SetGrid nx="3" ny="2" />
  <Trace grid="yes" textformat="yes" objects="no" />
  <Pageformat width="210mm" height="290mm" />

  <LoadFontfile name="CrimsonPro-Regular" filename="CrimsonPro-Regular.ttf" mode="harfbuzz"/>
  <LoadFontfile name="CrimsonPro-Bold" filename="CrimsonPro-Bold.ttf" mode="harfbuzz"/>
  <LoadFontfile name="CamingoCode-Bold" filename="CamingoCode-Bold.ttf"  mode="harfbuzz" />
  <LoadFontfile name="CamingoCode-Italic" filename="CamingoCode-Italic.ttf"  mode="harfbuzz" />

  <DefineFontfamily fontsize="12" leading="14" name="para">
    <Regular fontface="CrimsonPro-Regular" />
  </DefineFontfamily>

  <DefineFontfamily fontsize="16" leading="20" name="tito">
    <Regular fontface="CamingoCode-Regular" />
    <Bold fontface="CamingoCode-Bold" />
    <Italic fontface="CamingoCode-Italic" />
  </DefineFontfamily>

  
  <Record element="data">
    <ProcessNode select="animals" />
  </Record>

  <Record element="animals">

    <!-- UNIT BLOCK -->
    
    <Group name="unit">
      <Grid width="1cm" height="12pt" />
      <Contents>
	
	<!-- TITLE BLOCK -->
	
	<PlaceObject>
	  <Table padding="2mm" width="6" stretch="max" fontfamily="tito">
	    <Columns>
	      <Column width="6" />

	      <!-- ADD "NEW" COLUMN -->
	      
	      <Switch>
		<Case test="@new = 'true'">
		  <Column width="3*" />
		  <Column width="1*" />
		</Case>
	      </Switch>

	      <!-- END "NEW" COLUMN -->
	      
	    </Columns>
	    <Tr backgroundcolor="yellow">
	      <Td>
		<Paragraph>
		  <B><Value select="@title" /></B>
		</Paragraph>
	      </Td>

	      <!-- IT IS NEW -->
	      
	      <Switch>
		<Case test="@new = 'true'">
		  <Td align="right" backgroundcolor="red" padding-right="5mm">
		    <Paragraph>
		      <I><Value>NEW</Value></I>
		    </Paragraph>
		  </Td>
		</Case>
	      </Switch>

	      <!-- END NEW -->
	      
	      
	    </Tr>	      
	  </Table>
	</PlaceObject>

	<!-- JUMP A COUPLE OF LINES -->

	<NextRow rows="2" />

	<!-- LISTED ITEMS -->
	
	<PlaceObject>
	  <Textblock width="6" fontfamily="para">
	    <ForAll select="item">
	      <Paragraph>
		<Value select="." />
	      </Paragraph>
	    </ForAll>
	  </Textblock>
	</PlaceObject>
      </Contents>
    </Group>

    <!-- CALL THE UNIT BLOCK -->

    <PlaceObject groupname="unit" />
  </Record>
</Layout>

Thanks in advance! 🙏

p.s. why is your code always colored and well formatted? 🤷‍♂️

[pgundlach]

Hello Cicorione!

Hi @pgundlach, I have had time to work this week and I got decent results because all of your help so far. 🤝

good job! (seriously)

let me answer some questions in this reply before I will add a suggestion another reply.

I have a table where a new column appears to highlight the item as "NEW", the code works but I can't pass the color and I don't understand why.

The problem here is that the first cell is too wide. You specify as width 6 which is exactly the same width as the table, so the first column spans over the whole width of the table and leaves no room for column two and three. This took me some time to figure out, and I first thought there is yet another bug in the software ;-)

Also I would like to know if it is possible tracing the grid inside a group;

no, never thought about that. This does not look trivial to me, but I keep this in mind since it seems very useful for debugging.

p.s. why is your code always colored and well formatted? 🤷‍♂️

I format the code with the text editor (Visual Studio Code in my case) and then I insert it here with

```xml
<code>
```

You can use this for many languages.

See https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks

[Cicorione]

Oh I see, what happened. It took me a while figuring out that I had manipulate both column and Td; but it wasn't necessary redefine the columns as I did, I have still difficult to understand how properly works the switch command, too bad for myself! 🤦‍♂️

[pgundlach]

Here is one alternative with <Span>, which does not seem to work correctly (will fix that).

This is just the title block, everything else is the same:

<PlaceObject>
    <Table padding="2mm" width="6" stretch="max" fontfamily="tito">
        <Columns>
            <Column width="1*" />
        </Columns>
        <Tr backgroundcolor="yellow">
            <Td>
                <Paragraph>
                    <B>
                        <Value select="@title" />
                    </B>
                    <Switch>
                        <Case test="@new = 'true'">
                            <HSpace />
                            <!-- somehow these background-padding-bottom don't seem to work, I'll fix these -->
                            <Span background-color="red" background-padding-bottom="2pt" background-padding-top="2pt">
                                <I>
                                    <Value> NEW </Value>
                                </I>
                            </Span>
                        </Case>
                    </Switch>
                </Paragraph>
            </Td>
        </Tr>
    </Table>
</PlaceObject>

[pgundlach]

This comes closer to your code. Again, just the title block.

There are two columns (one mandatory one optional) with the ratio 3:1. I'd center the red NEW but you can of course chose whatever you want.

<PlaceObject>
    <Table padding="2mm" width="6" stretch="max" fontfamily="tito">
        <Columns>
            <Column width="3*" />

            <!-- ADD "NEW" COLUMN -->
            <Switch>
                <Case test="@new = 'true'">
                    <Column width="1*" />
                </Case>
            </Switch>
            <!-- END "NEW" COLUMN -->
        </Columns>

        <Tr backgroundcolor="yellow">
            <Td>
                <Paragraph>
                    <B>
                        <Value select="@title" />
                    </B>
                </Paragraph>
            </Td>

            <!-- IT IS NEW -->
            <Switch>
                <Case test="@new = 'true'">
                    <Td align="center" backgroundcolor="red">
                        <Paragraph>
                            <I>
                                <Value>NEW</Value>
                            </I>
                        </Paragraph>
                    </Td>
                </Case>
            </Switch>
            <!-- END NEW -->
        </Tr>
    </Table>
</PlaceObject>

[Cicorione]

Thank you! I am behind my schedule, I'd like to have the code ready by this Friday! Well today I will focus on the layout, but next week I will start to use real data from our catalog and replicate a section of the one we sent to print.

Thank you very much for helping me out with everything! 🙏