How to get flex Text element to wrap content in custom view stylesheet?

[Former Member]

To all the Nakisa gurus (and wannabes:) out there:

Who knows how you're meant to get the flex <Text> element to wrap its contents instead of adding the ellipses (...) when the content width exceeds the width of the element or bounding container? No matter what I do it always just adds the ellipses and never ever wraps!

Because none of the Nakisa delivered templates (in Templates_Deployed) specify a namespace for the flex tags it is unclear which Adobe Flex specification applies and an exhaustive amount of trial and error have so far failed to deliver the desired outcome.

A number of posts elsewhere seem to indicate that this is a somewhat problematic behaviour in Flex which may be governed by the presence or absence of width and height specifiers all the up the bounding container tree to the Application level, but seeing as one only configures the inside of the rounded-rect box in the Templates_Deployed stylesheet it is unclear what may or may not be happening upwards...

From the Adobe Flex 3 Help page for the Text control it appears that to get contents to wrap you simply need to expressly define the pixel width and the contents should automatically wrap, but in my tests this no workee....

I have the following (pretty straightforward) XSL template "flex-display" code:

  <xsl:template name="flex-display">
    <VBox height="50" style="vertical-gap:0;padding-top:5;{$styleBackgroundFlex}"  width="{$contentwidthWithoutPx}">
      <Text style="{$fontStyleFlex};" type="label" width="{$contentwidth}">
        <xsl:value-of select="$OrgUnitName"/>
      </Text>
      <Text style="{$fontStyleManagerFlex};" type="label" width="{$contentwidth}">
        <xsl:value-of select="$managerNameForLevel"/>
      </Text>
    </VBox>
  </xsl:template>

Note: the {$fontStyleFlex} and {$fontStyleManagerFlex} variables only specifies font-size, font-weight, font-style and color styles, nothing else.

FYI we're talking about Nakisa OrgChart 4.0 SP1 here, but I don't imagine the issue is particularly release-dependent.

So, over to the brains trust...

Cheers,

Francois.

[lukemarson · Accepted solution]

Hi Francois,

You cannot wrap <text> elements, hence why you haven't been successful. This is why the ellipsis is used.

The only other way would be to add multiple <text> elements for certain lengths of text. For example, on the first line select the first, say, 35 characters of the text and on the second line display characters 36 to 70.

And yes, Nakisa does not provide a list of FleXML tags that you can use in their templates...

Best regards,

Luke

[Former Member · Accepted solution]

Thanks for the reply, Luke.

Do you know if the Nakisa "<Text>" element is an actual FleXML tag or not, 'cause if it is then it certainly is meant to allow wrapping.

Are you aware of any other elements one can use that will wrap? Having to manually pre-process each text would be seriously annoying.

We're trying to achieve a more condensed layout (i.e. narrower but taller boxes) for a top structure chart that has to fit on one A3 page - I'm sure you've had to do something similar in the past...

[lukemarson · Accepted solution]

I don't think any of Nakisa's FleXML tags are genuine FleXML as the whole Flex module has been adapted by Nakisa. It doesn't even leverage custom colours or CSS at the last check.

Maybe can shed some light on this.

[Former Member · Accepted solution]

Hi Francois,

Please use <Text type="text">...</Text> instead of <Text type="label"/> this will wrap the text.

Also please make sure that the height of the parent elements allow the height you want to achieve. Meaning that any of the parent elements don't have a height set.

   <HBox style="horizontal-gap:0;padding-top:5;" width="235" >
    <xsl:choose>
     <xsl:when test="string-length($AssistantFlag) &gt; 0">
      <Text type="text" width="189" height="30" style="font-size:10;font-weight:bold;">
       Currently the name of this orgunit is <xsl:value-of select="$OrgUnitName"/>
      </Text>
      <Spacer width="100%"/>
      <img tooltip="[Lang TBV_Assistant]" title="[Lang TBV_Assistant]" src="images/Template_based_views/assistant.gif" width="9" height="11"/>
     </xsl:when>
     <xsl:otherwise>
      <Text type="text" width="189" height="30" style="font-size:10;font-weight:bold;">
       Currently the name of this orgunit is <xsl:value-of select="$OrgUnitName"/>
      </Text>
     </xsl:otherwise>
    </xsl:choose>
   </HBox>

If the HBox element has height set to, say, 15 then the text element's height will not take effect.

Please also check the height of the Orgchart node. If the collective height of all you elements exceeds the overall height of the view then UI elements from bottom on the view will be truncated.

[Former Member · Accepted solution]

Thanks for that Faraz, it looks very promising. I'm going to check it out ASAP and report back!

[Former Member · Accepted solution]

Ladies and gentlemen, we have a winner!

Many thanks to Faraz for shedding light on this murky area of the Nakisa tooling and to Luke for his prompt and helpful input.

And now for my little rant:

For any Nakisa folks listening, I believe I won't be alone in saying you need to up your game with respect to standards compliance or at the very least providing improved visibility of the supported technical features (e.g. namespaces, XSD or even DTD references would be very useful...).

Otherwise your partners are forced to implement solutions with one hand tied behind their back, which is very frustrating if you're the one facing the customer...

For the rest of you, keep plugging away; one day the light of Faraz may shine on you too

[Former Member · Accepted solution]

A word of advice to those that wish to use wrapping text as covered in the discussion above:

In my testing the Flex layout is unreliable for wrapping text at low zoom levels (e.g. when printing a large chart split over 2 or three pages) if you don't specify explicit heights for the <Text> element in question!

The problem manifests itself as words just disappearing from the text that should be wrapped, as if it were unable to dynamically determine the correct height for the element at the low zoom level.

The solution for me was to specify explicit heights and then the text wrapped reliably at all zoom levels...

[lukemarson · Accepted solution]

Otherwise your partners are forced to implement solutions with one hand tied behind their back

That's always been a problem. Nakisa's delivery model is more focused around their Professional Services delivering the services rather than the partner, although in practice this model is difficult to undertake. Nakisa have a huge database of configurations and areas of their solution that are intentionally "locked down" so they cannot be configured in the AdminConsole (e.g. effort has been made to stop it being configured through the AdminConsole), so something tells me nothing will change soon...

[Former Member · Accepted solution]

Hi Faraz,

I noticed your screenshot features some horizontally centred text. Care to share how you did this? I have tried using Spacer tags either side of the element to be centred as well as the Flex 3 VBox attribute horizontalAlign="center" all without any luck...

I see from the "Print/Export" config of a hierarchy they use code like '<TEXTFORMAT><P ALIGN="CENTER">...' which I thought to try next. Seeing how must "standard" Flex tags and attributes are happily being ignored I'm not holding out much hope.

Very curious to know how you achieved this!

Cheers,

Francois.

[lukemarson · Accepted solution]

Hi Francois,

You can use a style attribute in the <text> tag:

<Text width="100%" type="text" style="font-size:10;text-align:center;">

  Centered text goes here

</Text>

Best regards,

Luke

[lukemarson · Accepted solution]

I created a Wiki entry for this:

http://wiki.sdn.sap.com/wiki/display/ERPHCM/Wrapping+Text+in+Flex+Views

[Former Member · Accepted solution]

Thanks Luke

Also please notice that width=100% will make this text element occupy 100% of its parent. Not the 100% of view port.

Just a side note 🙂

Thanks,

Faraz

[Former Member · Accepted solution]

Thanks for the input.

I've had luck with <Text> element styling as per your example, but HBox and VBox just shrug off most of my attempts to style simple things like centering an image (which is where the question came from). I've tried "margin-left" and "margin-right" set to auto, I've tried "vertical-align" set to middle, I've tried using "background" for the image... it just laughs at you.

I've even tried Flex attributes like verticalAlign on HBox, both directly specified and attempted to be set through embedded ActionScript, but again no dice.

Clearly some sort of background image style is accepted, because you can use the non-standard "node-background-gradient" style which I'm guessing is being expanded to the accepted CSS equivalent or something.

This is where the frustration with the Nakisa folks really sets in: why on earth should we be stabbing in the dark like this? Just tell us what the heck this thing supports and what it does not?

Anyway, been there, ranted about that. At least there will always be folks such as yourself willing to point an exasperated soul in the right direction...