Copyrights to Hassey Wijetunge Folio

1. How to show
hidden content
using a button

2. 1. First place the Action Button com-
ponent to the place you want to appear
and be executed.
2. Click on the Edit window to
configure the “Action Button”.

3. 4 Change the text and
the icon as desired. (1a)
5. Now click on the Appearance Tab
(2) and select the button style from the
drop down list under the topic, “Button
Appearance”. (2a)
6. Now click on the Behaviour tab (3)
section, to set the action what we want the
button to do.
7. Make sure to select (1) “No Action” from the drop down
list under the header ‘Button Action’ and (2) “Click” needs to be
selected from the drop down list under the header ‘Set completion
on status on’. (3a)
3. When the component options
button appears, Click on the
“Button” options section. (1)

4. 9. It is best to keep “Keep Active” option
for the button, after it is being clicked.
10. Now go back to the page builder and hide the
section you want to be visible when the button is
being clicked.
8. By setting No action, we will create a trigger for
the button to be called it when it is clicked. Since there
is no premade action call; we have to create it from
scratch.

5. 12 Click on the “Logic” tab in
the Page Builder. (1)
14. You will now be prompted by a
form as shown below. (3)
13 To create a trigger logic, you
need to click on the “+” icon. (2)
11. Now lets create the trigger
for the button.

6. 16. Click on the drop down next to “Select Event” and
type Action Button Clicked. (2)
15. Give it a distinguished name. (1)

7. 18. You need to click on
the drop down menu, and
select “Action Button”. If
you have multiple buttons
created, you need to select
the appropriate button. (a)
(1)
20. Now type “Show
Hidden Article”. It
could be a Page, Block
or a Component. Select
what you need show
from the list. (c)
21. Once you select
what needs to be
shown, from the
“Articles”, Having
proper naming
conventions will help
you easily remember
and help you to find
out the component
needs to be shown.
(d)(1)
17. Now we need to choose
the condition. We need to
select the Action Button.
This is the button we created
before. (b)
19. Now we need to
set the action to the
buttons. We need to
select the action by
selecting the action
from the ‘Select
Action’. (a)(2)

8. 22. To view it instant-
ly when the button is
clicked, set the time
delay to 0. (d)(2)
23. We need to create
another action. First we
instructed the item to
be shown, but now we
have to navigate to that
component; helping
the user to carry on his
learning. (d)(3)
24. Now we need to set a new
action for the button to work.
Select the action “Navigate to
Article” from the drop-down
menu. Note that it will show
the action number next to the
drop-down list box. It will be
easy to type the action search
field in the drop-down list.(e)
25. Now we have
to select the article
which was found
and link it to display
screen. NOTE that
this could be ‘Block’,
‘Page’, ‘Component’ or
‘Article’. You can even
type the name of the
object in the drop down
list. (f)(1)
26. Now we need to give it a
delay. You can enter 100 in the
text box next to the “Delay By
(ms)”. (f)(2)
27. Now click outside the trigger
and click on the Live Preview to
view the changes.