Ask a Jedi: Doing a trim with Spry

OJ asks:

I have a spry question. I am displaying data like so: {dsProjects::Solution} I want to limit the amount of characters displayed to 100. How do I go about doing that?

This is fairly simple in Spry. While it has always been possible using event handlers for your data, it is far easier using a function to display the text. Let me demonstrate. Take the following XML document for our seed data:

<kids> <kid> <name>Jacob</name> <description>Jacob is a cool kid. He likes Bionicles. He doesn't like Star Wars as much as he should.</description> <age>8</age> </kid> <kid> <name>Lynn</name> <description>Lynn is the most beautiful girl in the world. She is also the most intelligent. She is also a princess.</description> <age>7</age> </kid> <kid> <name>Noah</name> <description>Noah is going to be the next quarterback for the New Orleans Saints. He will take them to the Super Bowl.</description> <age>6</age> </kid> </kids>

Note the description field is a bit long. On the front end, my simplest example of using this data would be:

<div spry:region="dsRows"> <div spry:state="loading">Loading - Please stand by...</div> <div spry:state="error">Oh crap, something went wrong!</div> <div spry:state="ready">

&lt;div spry:repeat="dsRows"&gt;
&lt;p&gt;
{name} is {age} years old&lt;br/&gt;
{description}
&lt;/p&gt;
&lt;/div&gt;

&lt;/div&gt;

</div> </code>

To tell Spry we want to manipulate the description, we can switch the {description} token to {function::formatDescription}. We then have to create the JavaScript funciton.

function formatDescription(region,lookupFunc) { var value = lookupFunc("{description}"); if(value.length <= 100) return value; else return value.substring(0,100) + "..."; }

The API for these ‘format’ functions require that we specify both the region and an alias for the lookupFunc. The lookupFunc is used to translate the original token into a real value.

At that point we do simple string manipulation. If the size is 100 characters or less, we return it. If it is more, we return a substring with … added to the end. For me, this returned:

Jacob is 8 years old
Jacob is a cool kid. He likes Bionicles. He doesn't like Star Wars as much as he should.

Lynn is 7 years old
Lynn is the most beautiful girl in the world. She is also the most intelligent. She is also a prince...

Noah is 6 years old
Noah is going to be the next quarterback for the New Orleans Saints. He will take them to the Super ...

Nice and simple! Here is the complete code for the front end.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script src="/spryjs/xpath.js" type="text/javascript"></script> <script src="/spryjs/SpryData.js" type="text/javascript"></script> <script type="text/javascript"> <!-- var dsRows = new Spry.Data.XMLDataSet("test.xml", "/kids/kid");

function formatDescription(region,lookupFunc) { var value = lookupFunc(“{description}”); if(value.length <= 100) return value; else return value.substring(0,100) + “…”; } //–> </script>

</head>

<body>

<div spry:region=”dsRows”> <div spry:state=”loading”>Loading - Please stand by…</div> <div spry:state=”error”>Oh crap, something went wrong!</div> <div spry:state=”ready”>

&lt;div spry:repeat="dsRows"&gt;
&lt;p&gt;
{name} is {age} years old&lt;br/&gt;
{function::formatDescription}
&lt;/p&gt;
&lt;/div&gt;

&lt;/div&gt;

</div>

</body> </html> </code>

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for Extend by Auth0. He focuses on serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

Lafayette, LA https://www.raymondcamden.com

Comments