When new users visit your website or product you should demonstrate your product features using a step-by-step guide. Even when you develop and add a new feature to your product, you should be able to represent them to your users using a user-friendly solution. Intro.js is developed to enable web and mobile developers to create a step-by-step introduction easily. Intro.js is open-source and free to use.
You can visit https://introjs.com to find more information about Intro.js
First of all, we should associate CSS and JavaScript files of Intro.js with our application.
Tip: add introjs-rtl.css just if your language is RTL.
To get above files, download source file of Intro.js via https://github.com/usablica/intro.js/tags and after unzip, you need just above files. Now do something in Oracle APEX Page:
For this blog post I create below form and I am going to show help message for Intro.js Region, Sal Item, Img Item and Download button via Intro.js.
Set Static ID for Intro.js region:
Set Static ID for Download button:
For next step add help text in JSON format on page level.
{
"help":{
"title":"",
"description":"",
"items":[
{
"itemId":"about_introjs",
"itemHelpText":"Intro.js is developed to enable web and mobile developers to create a step-by-step introduction easily."
},
{
"itemId":"P26_SAL",
"itemHelpText":"Salary must be more than 2500 dollars."
},
{
"itemId":"P26_IMG",
"itemHelpText":"Your photo must be in the jpeg format."
},
{
"itemId":"btn_download",
"itemHelpText":"Intro.js is free and open-source. Download it from introjs.com"
}
]
}
}
Tip: don’t use Enter key in “itemHelpText”.
As I said for region components and buttons we should use their Static ID and for page items we use their name for “itemId” in above code.
For next step, add CSS and JavaScript file URLs on page level.
JavaScripts File Urls:
#APP_IMAGES#intro.js
CSS File Urls:
#APP_IMAGES#introjs.css
Tip: If your language is RTL add #APP_IMAGES#introjs-rtl.css too.
Insted of creating help button in each page, you can create it in global page[0] as bellow steps :
First, create a region of type” PL/SQL Dynamic Content” in breadcrumb position, and place the following PL/SQL code in its source:
DECLARE
l_help_text NVARCHAR2 (4000);
BEGIN
SELECT TO_CHAR (HELP_TEXT)
INTO l_help_text
FROM apex_application_pages
WHERE application_id = :APP_ID AND page_id = :APP_PAGE_ID;
IF ( LENGTH (l_help_text) > 0
AND TO_CHAR (l_help_text) <> 'No help is available for this page.')
THEN
HTP.p (
'
<button class="btnHelp" onclick="javascript:introJs().setOptions({ ''nextLabel'': ''Next'', ''prevLabel'': ''Back'', ''skipLabel'': ''Skip'', ''doneLabel'': ''Done'' }).start();return false;">
<span class="icon t-Icon fa fa-info-circle-o"></span>Help</button>
');
END IF;
EXCEPTION
WHEN OTHERS
THEN
HTP.p ('');
END;
The next step is creating a region of type” PL/SQL Dynamic Content” in “before footer” position in global page[0] and place the following PL/SQL code in its source :
DECLARE
v_HelpText NVARCHAR2 (4000) := '';
v_output NVARCHAR2 (4000) := '';
v_ItemId NVARCHAR2 (4000) := '';
v_ItemHelpText NVARCHAR2 (4000) := '';
l_count PLS_INTEGER := 0;
j apex_json.t_values;
BEGIN
SELECT TO_CHAR (HELP_TEXT)
INTO v_HelpText
FROM apex_application_pages
WHERE application_id = :APP_ID AND page_id = :APP_PAGE_ID;
apex_json.parse (j, v_HelpText);
l_count := apex_json.get_count (p_path => 'help.items', p_values => j);
v_output := '<script type="text/javascript">';
FOR i IN 1 .. l_count
LOOP
v_ItemId :=
APEX_JSON.get_varchar2 (p_path => 'help.items[%d].itemId',
p_values => j,
p0 => i);
v_ItemHelpText :=
APEX_JSON.get_varchar2 (p_path => 'help.items[%d].itemHelpText',
p_values => j,
p0 => i);
v_output :=
v_output
|| 'document.querySelector("#'
|| v_ItemId
|| '").setAttribute("data-step","'
|| i
|| '");'
|| CHR (13)
|| 'document.querySelector("#'
|| v_ItemId
|| '").setAttribute("data-intro","'
|| v_ItemHelpText
|| '");'
|| CHR (13);
END LOOP;
v_output := v_output || '</script>';
HTP.p (v_output);
EXCEPTION
WHEN OTHERS
THEN
HTP.p ('');
END;
Above code fetch help section of page that you fill.
Now, run your application.
Demo: https://apex.oracle.com/pls/apex/f?p=15676:5
Good article to integrate IntroJS. How can I add Help to the navigation bar and trigger IntroJS?
ReplyDeleteThanks
Thanks for sharing this great information I am impressed by the information that you have on this blog. Same as your blog i found another one Oracle Fusion Financials . Actually I was looking for the same information on internet for Oracle Fusion Financials and came across your blog. I am impressed by the information that you have on this blog. It shows how well you understand this subject, you can learn more aboutOracle Fusion Financials . By attending Oracle Fusion FinancialsTraining .
ReplyDelete