Speaking with your team is really important
When working remotely, as most of us are these days, it can be easy to work in a silo. Not speaking to other developers, not learning from them. That is a problem when the team aren't all in the same office, however, it shouldn't be.
Today, I was working on a new Document Type within Umbraco and there was a bit of functionality that I built that I wanted to get a second opinion on.
What did I need to build?
The client had provided visuals that had a button in the middle of a paragraph. This button linked to a section further down the page. When you click on the button, the page scrolls down to that section.
How did I solve this issue?
I thought about the problem for a while and had 2 different thoughts. The first was to create a textarea for the top paragraph, a text string for the button text and then a second textarea for the bottom paragraph. If the button text field was empty then the button wouldn't be rendered.
This just didn't feel like a good solution.
The second option and the one I went with was to use placeholder tokens.
How would the client use this to render the button?
Within the Rich Text Editor, the client would type {{Button}} and in code, I would search the contents of the RTE and replace {{Button}} with a partial view which had the button code.
It worked but it did mean the client would need to know how to use the placeholder token. It also had the down side that the text for the button was hardcoded, yes I could have added another field on the document type to have button text but then I would need to explain to the client that this text was only displayed when the token is used. Not great.
Solution 1
After demo'ing the placeholder token to Nik and Damien a 3rd solution was suggested. Use Umbraco Macros.
I created a new Umbraco Macro and used parameters so that the client can add custom text, they can place the Macro anywhere within the RTE and it's much easier for them than needing to use placeholder tokens. Perfect!
Second issue needing solved
The second feature I had to work out was how to display a sentence on the page, which had a darker background and also a way of adding a <span></span> class around the word to apply some custom styling similar to the image below.
Again, I went down the placeholder token option, a text string field in the backoffice allowed the user to type in some plain text and then they could wrap the text they want to bold and underline with {{span}} My text {{/span}}. Again I search this field then replace the placeholders with <span> My text </span>.
Solution 2
To get rid of the placeholder option.
I kept the text string field but to highlight individual words I used the Repeatable Textstring property type. The client can then type in the word or words they want to highlight and in code I then find and replace the words and wrap them in <span> tags.
@if (Model.HighlightText.IsNullOrWhiteSpace() == false)
{
String highlightedSentence = Model.HighlightText;
if (Model.WordsToHighlight != null && Model.WordsToHighlight.Any())
{
foreach (var word in Model.WordsToHighlight)
{
highlightedSentence = highlightedSentence.Replace(word, "<span>" + word + "</span>");
}
}
<div class="standardsblock-panelcontent-intro-highlighted">
@Html.Raw(highlightedSentence)
</div>
}So the client doesn't need to know how to use placeholders and they get the functionality they requested.
Conclusion
These new solutions didn't take long to implement and it made me rethink my approach. It was really good having a 10 minute chat with the team and it's something I highly recommend anyone to do.
Speak with your fellow developers, brainstorm ideas and ask questions. It's a great way to learn but it's also a great way to keep in touch with each other.
Published on: 01 February 2021