Front-end Developer Specialist (OutSystems 11) — Sample exam — commented
If you want to read this in Portuguese, it is available at this link.
The questions below are from the sample Front-end Developer Specialist (OutSystems 11) certification exam available on the OutSystems website.
The objective is to comment on each of the 8 questions available in the exam example — which does not exclude the need to check the support material available on the website.
- Considering the Architecture Canvas and its layers, in which type of module should the application’s patterns be created?
A. Foundation Module
B. End-User Module
C. Core Services Module
D. Business Services Module
Answer — A
Architecture Canvas is an architecture diagram recommended by OutSystems. Which classifies modules into three layers depending on their function.
End User Module Layer: Does not include reusable parts. UI and processes that deliver functionality directly to end users
Core Module layer (Core Services): Reusable parts. Includes business logic
Foundation Module Layer: Reusable parts. Does not include business logic
In OutSystems, patterns are the common parts of the UI that are highly reusable.
2. Consider the scenario in the next image, where the DirectoryTh Theme is the default module theme, and the ItemBlock is used in the Items Screen. Knowing that no other Theme is used in the module, what is the correct style for the Item Container in the Items Screen?
A. Background color will be black and the text color will be the default one.
B. Background color will be red and the text color will be blue.
C. Background color will be blue and the text color will be white.
D. Background color will be black and the text color will be white.
Answer — D
OutSystems allows you to define CSS in:
1. Grid Container widget system stylesheet
2. Block Style Sheet
3. Theme stylesheet containing the base theme (if specified)
4. Screen or Email Stylesheet
5. Extra theme stylesheet with grid settings defined in Theme property
6. Styles generated by Service Studio when using the style editor
7. Inline styles defined in attributes or extended properties
According to CSS application rules, the higher the number, the higher the priority.
Ignoring the additional details, the general order of applying CSS is Block > Theme > Canvas > Style Editor. Looking at the image in question, the same class is described in Block/Theme/Screen.
- background color: red from Block -> blue from Theme -> black from Canvas is applied, then according to the rule, black
- color: blue from Block -> white from Theme is applied, then according to the rule, white
3. What will be the behavior of a Container with the .main-container class applied to it in the browser and in Service Studio?
A. The Container will have a border when rendered in the browser and in the Service Studio preview.
B. The Container will only have a border in the Service Studio preview, and not when rendered in the browser.
C. The Container will only have a border when rendered in the browser, and not in the Service Studio preview.
D. The Container will not have a border when rendered in the browser, and neither in the Service Studio preview.
Answer — B
Styles are typically applied in the browser and in Service Studio (opened in the UI editor).
However, when you prefix an attribute with “-servicestudio”, the setting is only applied when viewed in Service Studio.
Looking at the CSS of the question, let’s just analyze the border option, as only this one has the “-servicestudio” attribute and without considering whether there are other themes or additional information, as there is no such information in the question.
- Browser:
border style: dashed; border width not specified;
- Service Studio: keeps all styles defined for the browser and changes what is with the “-servicestudio” attribute
border style: dashed; and border width: 4px; A dashed line with a width of 4px is displayed
Attention, in the exam sample in English it says that the correct answer would be A and in the sample in other languages that the answer would be B; but with the image that is being presented, we have no way of knowing the rest of the CSS code to say whether there is a border in the browser or not, as we don’t have the rest of the code, and the basis for answering the questions should be what we have available — this duality of answers has already been questioned in the OutSystems training.
4. Considering the Style Sheets in the image, and knowing the Block is used inside the Screen, which Style Sheet is loaded last when the Screen is loading?
A. The Block’s Style Sheet.
B. The Screen’s Style Sheet.
C. The Style Sheets are loaded at the same time.
D. The Theme’s Style Sheet.
Answer — B
Stylesheet loading order — as already mentioned — for block, canvas and theme.
This way, it is loaded in the order Block > Theme > Canvas.
5. Which of the following options is NOT a best practice for creating custom patterns?
A. A custom pattern should avoid business logic.
B. A custom pattern should have a preview and a sample of usage.
C. A custom pattern should define the structure and the required styling.
D. A custom pattern should promote and contribute to architecture isolation.
Answer — C
You can see this documentation from OutSystems: https://success.outsystems.com/documentation/best_practices/development/front_end_architecture_best_practices/
What are the good practices:
- Don’t add inline styles to elements.
- Do not add classes for desired values such as color name (.Black), size (.Width20px), style (.Bold), size (.fontSize15), etc.
- Don’t put business logic into these patterns.
Always read the exam questions very well, what the question is asking for is the wrong option or “what is NOT best practice”, then choose the wrong option.
Option C: “A custom pattern should define the structure and the required styling.” In other words, the pattern must define the desired structure and style. Although it may seem subtle in the excerpt above, common parts of the UI should have as few styles as possible. After all, because it is a common component, it is assumed that the placement target can have multiple styles, and there is a concern that if it has its own style, it will not match the placement target.
So the last part, “The required style”, is incorrect, so option C is correct (wrong option).
6. A Screen has an OnReady Event. The OnReady Event Handler Action has a JavaScript element that contains the code presented in the image. In this context, which of the following options is false?
A. The return value when calling a Client Action from the JavaScript code is a JavaScript object with the Actions’ output parameters, when applicable.
B. The Toggle Action executed in the JavaScript code will be called after 10 seconds.
C. When the user navigates to a different Screen, the application throws an error if the setTimeout is not destroyed before the transition.
D. The Toggle Action executed in the JavaScript code can either be a Screen Action or a Client Action defined in the global scope of the module.
Answer — B
The question states that there is a JavaScript element in the OnReady event handler. Its elements include
setTimeout(function(){$actions.Toggle();}, 10);
setTimeout is a function unrelated to OutSystems that executes the function in the first argument after the number of milliseconds specified in the second argument.
If you want to accurately evaluate all options, you’ll need knowledge of OutSystems, but option B “The toggle action performed in the JavaScript code will be called after 10 seconds” is wrong — 10 milliseconds instead of after 10 seconds. Thus, B is correct because the requested option is false.
Let’s take a look at other options,
A: The return value when called with the JavaScript name $actions.ClientAction is a simple JavaScript object that contains the output parameters for each client action. (see documentation here) So it’s correct.
C: This option refers to what happens if the screen transitions before the function is executed (if the configured Timeout is not destroyed in onDestroy). The answer is that if Toggle is an Action in Client Actions, it will work normally, but if it is a Screen Action, an error will occur. But, there isn’t enough information — so it can be used anyway. However, option B is definitely wrong, so toggling is probably Screen Action and option C is correct.
D: It is possible for the Toggle Action executed in the JavaScript code to be a Screen Action or a Client Action defined in the global scope of the module. This option is true and if you have any questions about JavaScript and OutSystems, you can see more about the documentation and javascript in OutSystems here
7. Considering the possibility of calling asynchronous Actions in JavaScript codedefined in an OutSystems application, which of the following options is true?
A. A Client Action is only considered asynchronous when the $resolve() or $reject() functions are used in a JavaScript element inside the Action.
B. When an asynchronous Client Action is called, its return value is a simple JavaScript object.
C. The $reject() function will trigger an Exception, when used, which will be handled by the first Exception handler available.
D. The $resolve() function signals either a successful or an unsuccessful execution of an asynchronous Client Action.
Answer — C
Customer Actions will be executed asynchronously when certain conditions are met.
This question is about defining asynchronous JavaScript code and you can see more about this topic here.
A: Always read the options carefully, in this case “only” is an important detail.
If a JavaScript element uses the predefined $resolve() or $reject() functions, the client action to which this element belongs is considered asynchronous. Additionally, a client action is also considered asynchronous if it involves a server call, such as executing a server action or updating an aggregate.
Therefore, option A, which states that only the first is the case, is incorrect.
B: Option that is incorrect because the return value of an asynchronous client action is a promise, not a simple JavaScript object.
When an asynchronous client action is called, its return value is a promise instead of a JavaScript object as in the synchronous case.
D: $resolve indicates successful asynchronous processing.
To signal the completion of execution of a called asynchronous client, use the predefined $resolve() function.
8. Consider a Placeholder with the class ph defined. How does OutSystems handle such a placeholder, when used on a Screen?
A. It hides the placeholder in the Screen, if it does not have any content inside it.
B. It always makes sure the space reserved for the Placeholder appears on the Screen, even if the placeholder has no content inside it.
C. It removes the Placeholder from the Screen structure, if it does not have any content inside it.
D. It makes sure that no additional content can be added to the Placeholder.
Answer — A
First, the Placeholder is something placed in the Block (element that defines the parts of the UI). This UI component (block) is used by placing it on the Screen or another Block, and at that moment the developer can place any widget in the Placeholder.
The .ph class has the function of hiding empty elements at run time (and has the behavior of display: none).
We can add the ph class to any element that we don’t want to display if it doesn’t include any content
Therefore, option A is correct.
Additionally: CSS display:none and visibility:hidden what is the difference between them?
display:none and visibility:hidden are two style declarations you can use to hide elements on the screen with CSS.
Display none — With a value of none for this property, the element’s display is disabled. This means that the element — as well as its children — will not be displayed. The document is rendered without the element as if it did not exist.
Visibility:hidden — This property does not affect the layout of the element. The element to which it is applied becomes “invisible”. The space required by the element’s box model remains, but the element itself is hidden. It is rendered with the placeholder.
The material for the Front-end Developer Specialist (OutSystems 11) exam is available on the OutSystems page.