As you may know, I love games. I subscribe to Games magazine and do their 2 cryptic crosswords religiously. And I also like to enter the contests of various kinds (with nominal prizes of $100 or free subscriptions).
In the latest issue of Games magazine, there was this contest (note that the deadline is Oct. 31, so there is still plenty of time for you to enter):
What you have to do is quite simple:
Find the code, which is a basic substitution cypher where each original letter in a word is changed to a different letter.
Decode the crossword clues.
Find pairs of Across clues (or pairs of Down clues) that have the same answer, add the numbers of those two clues, and enter the answer in the grid with that sum.
Finally, take the answer in the indicated answer (answer Across #33), run the cypher on that answer to get the answer to the contest.
If you are not interested in solving the puzzle but want to learn helpful SAP Build Apps tips, you can skip to the SAP Build Apps Tips section for 3 helpful tips for SAP Build Apps developers.
If you need help importing, just add a note to this blog. Here is the app in action.
How I Built My App
I wanted the app to keep track of the cypher as I was determining which letters were represented by what other letters. For example, you see that some words have at the end 'W, meaning that probably W = S, and the app needed to store this substitution.
When I got all the clues and the answers, I need to store which answers to pair up, so I needed a place to store this, too. So I created a backend project with 2 entities in my Visual Cloud Functions project.
Code:Source is the current letter, Target is th eletter is represents.
Pair:FirstClue and SecondClue are the clues that contain the same answer, and Answer is the answer to enter into the grid.
I set up my app page into 3 parts section.
Left Side (Cypher)
Here's where I have a simple text box which represents the letter that appears in the encrypted words, and next to it is a dropdown box where I can select the real letter this letter represents. Everytime I change the letter I do the following:
I update the local variable that holds the cypher with the formula:
It takes the word to decrypt, and SPLIT function makes it an array of characters.
The MAP function iterates over the list of characters.
For each character it checks with the CONTAINS function if it's alphabetic (contained in the constant "ABCD..." stored in an app variable). If it's not alphabetic, then it returns whatever it found (generally punctuation).
IF it is alphabetic, we use the FIND function to see what the decrypted letter is, if it was yet determined. If not, a dash is returned.
But we had a problem in the FIND function, because it uses a built-in item object to determine the field to check, but we want to check that against the item object we got from the MAP function. So we used the prefix <mapitem> to set the name of the object in the MAP function to something different, and now we could compare the 2 values.
Style By Formula
I wanted to highlight the clues when they were used in one of the pairs. So I edited the style, and created a new "Local Palette" color for the Background color property.
I retrieved the list of paris from the backend and put in appVars.Pairs.
With PLUCK, I created an array of numbers from all the firstClue fields and a list from the secondClue fields.
I used CONCAT to merge the to lists.
I used IS_IN_ARRAY to check whether the current clue number was in the combined list. If yes, shaded, and if not, white.
I worked quite a bit on spacing of the app, especially padding. IN a container, there are 2 places for managing spacing, especially with Container components:
LAYOUT TAB: The space between components manages the space around the current component, next to other components.
STYLE TAB: The padding managed the space inside the container, the padding like in an HTML table.
In addition, each component within a container can define its own extra space for itself.
This may be obvious, but I still get confused how to manage spacing, since there are many places to manage it, and there are additional properties (e.g., alignment, rows, cells, width, position) that will affect how the whole application lines up.
Also, in the project, note the use of containers to enable greater flexible in controlling spacing.