SlideShare a Scribd company logo
PLUG-INS UNPLUGGED
Christian Rokitta
Berlin 2016
Content
what context structure details exercise
APEX Versions vs Plug-in Features
5
4
APEX Page States
APEX Page States
Generate HTML
Templates, Definitions
Resources
CSS, JS, Images
Dynamic Actions
Inline JS
AJAX Calls (DB)
Submitting Form
Validating
Processing
Reasons for Using APEX
declarative: hiding complexity
behind properties; especially
HTML, CSS and JavaScript
catalogue of build-in
components
Limitations
common components
evolving standards
evolving browser/device capabilities
users expectations
APEX is an Extensible Framework
Add additional
declarative
functionality
Plug-in Types
Item
Region
Dynamic Action
Process
Authentication
Authorization
Plug-in Types vs Page States
Item Type Plug-in
validations
Region Type Plug-in
static vs dynamic
Dynamic Action Type Plug-in
Process Type Plug-in
Authorization Type Plug-in
Authentication Type Plug-in
Authentication schemes are used to determine if
the user can access the application. As such it is
not run on a page or component level.
When to use Plug-ins
not possible with standard
declarative APEX
hiding complexity
reusability (application,
instance, public)
maintainability
Skills to build APEX Plug-ins
SQL
PL/SQL
Declarative vs Extended Skills
Ideal APEX Team
Inspiration
write your own
cut-n-paste code
libraries/jQuery Plug-ins
Lots of well-know public available APEX plug-ins
are based on existing JS/jQ solutions
https://select2.github.io/
Inspiration
jQuery Plug-in Wishlist
• JS/CSS files/library
• Doc, HTML Example, how-to, …
• Options (Configuration)
• Methods (API)
• Events
http://felicegattuso.com/projects/timedropper/
$('#id').timeDropper({mousewheel:true,meridians:true,init_animation:'dropdown',setCurrentTime:false});
Common Plug-in Structure
Plugin PL/SQL function signature
• render
• AJAX-callback
PL/SQL Types
• configuration
• state
• parameter passing
APEX PL/SQL API helper
• include JS and CSS files
• …
APEX JavaScript API
• initiate AJAX calls
• …
Render Function
function <name of function> (
p_<type> in apex_plugin.t_<type>
, p_plugin in apex_plugin.t_plugin
[, p_...]
) return
apex_plugin.t_<type>_render_result
apex_plugin.t_<type>
type t_<type> is record (
<param n>
…
, <param n>
, attribute_01 varchar2(32767)
…
, attribute_NN varchar2(32767)
);
std. declarative
attributes
additional plug-in
specific attributes
(page component)
APEX Version dependencies
apex_plugin.t_plugin
type t_plugin is record (
name varchar2(45),
file_prefix varchar2(4000),
attribute_01 varchar2(32767),
… ,
attribute_15 varchar2(32767) );
APEX 4 max 10 attr.
additional plug-in
specific attributes
application level
(Component Settings)
Item Type Render Function
function <name of function> (
p_item in apex_plugin.t_item_item
, p_plugin in apex_plugin.t_plugin
, p_value in varchar2
, p_is_readonly in boolean
, p_is_printer_friendly in boolean
) return
apex_plugin.t_page_item_render_result
t_page_item
type t_page_item is record ( id number
, name varchar2(255)
, label varchar2(4000)
, plain_label varchar2(4000)
, label_id varchar2(255)
, placeholder varchar2(255)
, format_mask varchar2(255)
, is_required boolean
, lov_definition varchar2(4000)
, lov_display_extra boolean
, lov_display_null boolean
, lov_null_text varchar2(255)
, lov_null_value varchar2(255)
, lov_cascade_parent_items varchar2(255)
, ajax_items_to_submit varchar2(255)
, ajax_optimize_refresh boolean
, element_width number
, element_max_length number
, element_height number
, element_css_classes varchar2(255)
, element_attributes varchar2(2000)
, element_option_attributes varchar2(4000)
, escape_output boolean
, attribute_01 varchar2(32767)
, …
, attribute_15 varchar2(32767));
Coding the Render Function
generate HTML for object
include assets (JS, CSS, …)
generate JS snippets
Coding the 3 Simple Steps
sys.htp.p('<input type="text" id="'||p_page_item.id||
' name="'||p_page_item.name||'" />');
apex_javascript.add_onload_code (
p_code => '$( "#'||p_page_item.id||'" ).timeDropper();'
,p_key => null );
apex_javascript.add_library (p_name => 'timedropper'
, p_directory => p_plugin.file_prefix
, p_check_to_add_minified => true );
apex_css.add_file (p_name => 'timefropper'
, p_directory => p_plugin.file_prefix );
Basic Demo Render Function
function render_timedropper(p_item in apex_plugin.t_page_item
, p_plugin in apex_plugin.t_plugin
, p_value in varchar2
, p_is_readonly in boolean
, p_is_printer_friendly in boolean)
return apex_plugin.t_page_item_render_result
is
v_result apex_plugin.t_page_item_render_result;
begin
apex_javascript.add_library(p_name => 'timedropper‘
, p_directory => p_plugin.file_prefix, p_check_to_add_minified => true);
apex_css.add_file(p_name => 'timefropper', p_directory => p_plugin.file_prefix);
sys.htp.p('<input type="text" id="' || p_page_item.id || '" name="' || p_page_item || '" />');
apex_javascript.add_onload_code(p_code => '$( "#' || p_page_item.id || '" ).timeDropper();', p_key => null);
return v_result;
end;
Beyond Basic Render Function
item (component) std. attributes
validation (for item type plugin)
AJAX Callback
Page Item Type Validation Callback
type t_page_item_validation_result is record(
message varchar2(32767)
, display_location varchar2(40)
, page_item_name varchar2(255)
);
Plug-in AJAX Callback
function <name of function> (
p_<type> in apex_plugin.t_<type>,
p_plugin in apex_plugin.t_plugin )
return apex_plugin.t_<type>_ajax_result
Callin the AJAX Callback
apex.server.plugin ( pAjaxIdentifier, { /*apex_plugin.get_ajax_identifier*/
x01-10: "...",
pageItems: "#P1_DEPTNO,#P1_EMPNO"
}, {
refreshObject: "#P1_MY_LIST",
loadingIndicator: "#P1_MY_LIST",
success: function( pData ) { ... do something ... },
any jQuery.ajax option,
});
sponsered demo
Q&A
Plugins unplugged

More Related Content

What's hot

Troubleshooting APEX Performance Issues
Troubleshooting APEX Performance IssuesTroubleshooting APEX Performance Issues
Troubleshooting APEX Performance IssuesRoel Hartman
 
Dynamic Components using Single-Page-Application Concepts in AEM/CQ
Dynamic Components using Single-Page-Application Concepts in AEM/CQDynamic Components using Single-Page-Application Concepts in AEM/CQ
Dynamic Components using Single-Page-Application Concepts in AEM/CQNetcetera
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMBuild single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMAdobeMarketingCloud
 
REST API Best Practices & Implementing in Codeigniter
REST API Best Practices & Implementing in CodeigniterREST API Best Practices & Implementing in Codeigniter
REST API Best Practices & Implementing in CodeigniterSachin G Kulkarni
 
Bridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEMBridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEMrbl002
 
API Development with Laravel
API Development with LaravelAPI Development with Laravel
API Development with LaravelMichael Peacock
 
RESTful API Design Best Practices Using ASP.NET Web API
RESTful API Design Best Practices Using ASP.NET Web APIRESTful API Design Best Practices Using ASP.NET Web API
RESTful API Design Best Practices Using ASP.NET Web API💻 Spencer Schneidenbach
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMBuild single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMconnectwebex
 
Intro to Rails Give Camp Atlanta
Intro to Rails Give Camp AtlantaIntro to Rails Give Camp Atlanta
Intro to Rails Give Camp AtlantaJason Noble
 
Restful api design
Restful api designRestful api design
Restful api designMizan Riqzia
 
Securing JSF Applications Against the OWASP Top Ten
Securing JSF Applications Against the OWASP Top TenSecuring JSF Applications Against the OWASP Top Ten
Securing JSF Applications Against the OWASP Top TenDavid Chandler
 
Salesforce Apex Hours : How Lightning Platform Query Optimizer works for LDV
Salesforce Apex Hours : How Lightning Platform Query Optimizer works for LDVSalesforce Apex Hours : How Lightning Platform Query Optimizer works for LDV
Salesforce Apex Hours : How Lightning Platform Query Optimizer works for LDVAmit Chaudhary
 
Intro to Ruby on Rails
Intro to Ruby on RailsIntro to Ruby on Rails
Intro to Ruby on RailsMark Menard
 
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...Fwdays
 
How Bitbucket Pipelines Loads Connect UI Assets Super-fast
How Bitbucket Pipelines Loads Connect UI Assets Super-fastHow Bitbucket Pipelines Loads Connect UI Assets Super-fast
How Bitbucket Pipelines Loads Connect UI Assets Super-fastAtlassian
 
Building ColdFusion And AngularJS Applications
Building ColdFusion And AngularJS ApplicationsBuilding ColdFusion And AngularJS Applications
Building ColdFusion And AngularJS ApplicationsColdFusionConference
 

What's hot (20)

Troubleshooting APEX Performance Issues
Troubleshooting APEX Performance IssuesTroubleshooting APEX Performance Issues
Troubleshooting APEX Performance Issues
 
Dynamic Components using Single-Page-Application Concepts in AEM/CQ
Dynamic Components using Single-Page-Application Concepts in AEM/CQDynamic Components using Single-Page-Application Concepts in AEM/CQ
Dynamic Components using Single-Page-Application Concepts in AEM/CQ
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMBuild single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
 
REST API Best Practices & Implementing in Codeigniter
REST API Best Practices & Implementing in CodeigniterREST API Best Practices & Implementing in Codeigniter
REST API Best Practices & Implementing in Codeigniter
 
Bridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEMBridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEM
 
API Development with Laravel
API Development with LaravelAPI Development with Laravel
API Development with Laravel
 
RESTful API Design Best Practices Using ASP.NET Web API
RESTful API Design Best Practices Using ASP.NET Web APIRESTful API Design Best Practices Using ASP.NET Web API
RESTful API Design Best Practices Using ASP.NET Web API
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMBuild single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
 
Intro to Rails Give Camp Atlanta
Intro to Rails Give Camp AtlantaIntro to Rails Give Camp Atlanta
Intro to Rails Give Camp Atlanta
 
APEX Migration
APEX MigrationAPEX Migration
APEX Migration
 
Ionic by Example
Ionic by ExampleIonic by Example
Ionic by Example
 
Restful api design
Restful api designRestful api design
Restful api design
 
Catalog display
Catalog displayCatalog display
Catalog display
 
Dash of ajax
Dash of ajaxDash of ajax
Dash of ajax
 
Securing JSF Applications Against the OWASP Top Ten
Securing JSF Applications Against the OWASP Top TenSecuring JSF Applications Against the OWASP Top Ten
Securing JSF Applications Against the OWASP Top Ten
 
Salesforce Apex Hours : How Lightning Platform Query Optimizer works for LDV
Salesforce Apex Hours : How Lightning Platform Query Optimizer works for LDVSalesforce Apex Hours : How Lightning Platform Query Optimizer works for LDV
Salesforce Apex Hours : How Lightning Platform Query Optimizer works for LDV
 
Intro to Ruby on Rails
Intro to Ruby on RailsIntro to Ruby on Rails
Intro to Ruby on Rails
 
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...
 
How Bitbucket Pipelines Loads Connect UI Assets Super-fast
How Bitbucket Pipelines Loads Connect UI Assets Super-fastHow Bitbucket Pipelines Loads Connect UI Assets Super-fast
How Bitbucket Pipelines Loads Connect UI Assets Super-fast
 
Building ColdFusion And AngularJS Applications
Building ColdFusion And AngularJS ApplicationsBuilding ColdFusion And AngularJS Applications
Building ColdFusion And AngularJS Applications
 

Viewers also liked

Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Christian Rokitta
 
G 5 eisodos_exodos_ekhorisi
G 5 eisodos_exodos_ekhorisiG 5 eisodos_exodos_ekhorisi
G 5 eisodos_exodos_ekhorisiganidoud
 
G 1 algorithms_programming
G 1 algorithms_programmingG 1 algorithms_programming
G 1 algorithms_programmingganidoud
 
Let's cross the bridge
Let's cross the bridgeLet's cross the bridge
Let's cross the bridgeganidoud
 
το λυκόφως του βυζαντίου
το λυκόφως του βυζαντίουτο λυκόφως του βυζαντίου
το λυκόφως του βυζαντίουganidoud
 
α 11 internet
α 11 internetα 11 internet
α 11 internetganidoud
 
The GolfLet
The GolfLetThe GolfLet
The GolfLetAbe Kim
 
γ 2 1_πραξεις-εξοδος-εισοδος
γ 2 1_πραξεις-εξοδος-εισοδοςγ 2 1_πραξεις-εξοδος-εισοδος
γ 2 1_πραξεις-εξοδος-εισοδοςganidoud
 
Introducing the Royal Scottish Geographical Society
Introducing the Royal Scottish Geographical SocietyIntroducing the Royal Scottish Geographical Society
Introducing the Royal Scottish Geographical SocietyRSGS
 
παρουσίαση 9γυμνάσιοκαλαμαριάς 1
παρουσίαση 9γυμνάσιοκαλαμαριάς 1παρουσίαση 9γυμνάσιοκαλαμαριάς 1
παρουσίαση 9γυμνάσιοκαλαμαριάς 1ganidoud
 
Face off apex template and themes - 3.0 - k-scope11
Face off   apex template and themes - 3.0 - k-scope11Face off   apex template and themes - 3.0 - k-scope11
Face off apex template and themes - 3.0 - k-scope11Christian Rokitta
 
Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Christian Rokitta
 
Confessions of an APEX Design Geek
Confessions of an APEX Design GeekConfessions of an APEX Design Geek
Confessions of an APEX Design GeekChristian Rokitta
 

Viewers also liked (15)

Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
 
G 5 eisodos_exodos_ekhorisi
G 5 eisodos_exodos_ekhorisiG 5 eisodos_exodos_ekhorisi
G 5 eisodos_exodos_ekhorisi
 
G 1 algorithms_programming
G 1 algorithms_programmingG 1 algorithms_programming
G 1 algorithms_programming
 
Let's cross the bridge
Let's cross the bridgeLet's cross the bridge
Let's cross the bridge
 
το λυκόφως του βυζαντίου
το λυκόφως του βυζαντίουτο λυκόφως του βυζαντίου
το λυκόφως του βυζαντίου
 
α 11 internet
α 11 internetα 11 internet
α 11 internet
 
The GolfLet
The GolfLetThe GolfLet
The GolfLet
 
γ 2 1_πραξεις-εξοδος-εισοδος
γ 2 1_πραξεις-εξοδος-εισοδοςγ 2 1_πραξεις-εξοδος-εισοδος
γ 2 1_πραξεις-εξοδος-εισοδος
 
Introducing the Royal Scottish Geographical Society
Introducing the Royal Scottish Geographical SocietyIntroducing the Royal Scottish Geographical Society
Introducing the Royal Scottish Geographical Society
 
APEX & Cookie Monster
APEX & Cookie MonsterAPEX & Cookie Monster
APEX & Cookie Monster
 
Browser Developer Tools
Browser Developer ToolsBrowser Developer Tools
Browser Developer Tools
 
παρουσίαση 9γυμνάσιοκαλαμαριάς 1
παρουσίαση 9γυμνάσιοκαλαμαριάς 1παρουσίαση 9γυμνάσιοκαλαμαριάς 1
παρουσίαση 9γυμνάσιοκαλαμαριάς 1
 
Face off apex template and themes - 3.0 - k-scope11
Face off   apex template and themes - 3.0 - k-scope11Face off   apex template and themes - 3.0 - k-scope11
Face off apex template and themes - 3.0 - k-scope11
 
Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25
 
Confessions of an APEX Design Geek
Confessions of an APEX Design GeekConfessions of an APEX Design Geek
Confessions of an APEX Design Geek
 

Similar to Plugins unplugged

AEM Sightly Deep Dive
AEM Sightly Deep DiveAEM Sightly Deep Dive
AEM Sightly Deep DiveGabriel Walt
 
Relevance trilogy may dream be with you! (dec17)
Relevance trilogy  may dream be with you! (dec17)Relevance trilogy  may dream be with you! (dec17)
Relevance trilogy may dream be with you! (dec17)Woonsan Ko
 
Summer '16 Realease notes
Summer '16 Realease notesSummer '16 Realease notes
Summer '16 Realease notesaggopal1011
 
DynamicRecord Presentation
DynamicRecord PresentationDynamicRecord Presentation
DynamicRecord Presentationlinoj
 
AEM Sightly Template Language
AEM Sightly Template LanguageAEM Sightly Template Language
AEM Sightly Template LanguageGabriel Walt
 
Salesforce meetup | Lightning Web Component
Salesforce meetup | Lightning Web ComponentSalesforce meetup | Lightning Web Component
Salesforce meetup | Lightning Web ComponentAccenture Hungary
 
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Chris Alfano
 
Custom post-framworks
Custom post-framworksCustom post-framworks
Custom post-framworkswcto2017
 
Custom post-framworks
Custom post-framworksCustom post-framworks
Custom post-framworksKiera Howe
 
Tk2323 lecture 9 api json
Tk2323 lecture 9   api jsonTk2323 lecture 9   api json
Tk2323 lecture 9 api jsonMengChun Lam
 
Salesforce Lightning Web Components Overview
Salesforce Lightning Web Components OverviewSalesforce Lightning Web Components Overview
Salesforce Lightning Web Components OverviewNagarjuna Kaipu
 
VBA API for scriptDB primer
VBA API for scriptDB primerVBA API for scriptDB primer
VBA API for scriptDB primerBruce McPherson
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...Fabio Franzini
 
JahiaOne - Jahia7: Query and Search API under the Hood
JahiaOne - Jahia7: Query and Search API under the HoodJahiaOne - Jahia7: Query and Search API under the Hood
JahiaOne - Jahia7: Query and Search API under the HoodJahia Solutions Group
 
Building social and RESTful frameworks
Building social and RESTful frameworksBuilding social and RESTful frameworks
Building social and RESTful frameworksbrendonschwartz
 
Prairie DevCon 2015 - Crafting Evolvable API Responses
Prairie DevCon 2015 - Crafting Evolvable API ResponsesPrairie DevCon 2015 - Crafting Evolvable API Responses
Prairie DevCon 2015 - Crafting Evolvable API Responsesdarrelmiller71
 
Introduction to GraphQL and AWS Appsync on AWS - iOS
Introduction to GraphQL and AWS Appsync on AWS - iOSIntroduction to GraphQL and AWS Appsync on AWS - iOS
Introduction to GraphQL and AWS Appsync on AWS - iOSAmazon Web Services
 

Similar to Plugins unplugged (20)

AEM Sightly Deep Dive
AEM Sightly Deep DiveAEM Sightly Deep Dive
AEM Sightly Deep Dive
 
Relevance trilogy may dream be with you! (dec17)
Relevance trilogy  may dream be with you! (dec17)Relevance trilogy  may dream be with you! (dec17)
Relevance trilogy may dream be with you! (dec17)
 
Summer '16 Realease notes
Summer '16 Realease notesSummer '16 Realease notes
Summer '16 Realease notes
 
DynamicRecord Presentation
DynamicRecord PresentationDynamicRecord Presentation
DynamicRecord Presentation
 
AEM Sightly Template Language
AEM Sightly Template LanguageAEM Sightly Template Language
AEM Sightly Template Language
 
Salesforce meetup | Lightning Web Component
Salesforce meetup | Lightning Web ComponentSalesforce meetup | Lightning Web Component
Salesforce meetup | Lightning Web Component
 
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
 
Ams adapters
Ams adaptersAms adapters
Ams adapters
 
Custom post-framworks
Custom post-framworksCustom post-framworks
Custom post-framworks
 
Custom post-framworks
Custom post-framworksCustom post-framworks
Custom post-framworks
 
Tk2323 lecture 9 api json
Tk2323 lecture 9   api jsonTk2323 lecture 9   api json
Tk2323 lecture 9 api json
 
Salesforce Lightning Web Components Overview
Salesforce Lightning Web Components OverviewSalesforce Lightning Web Components Overview
Salesforce Lightning Web Components Overview
 
VBA API for scriptDB primer
VBA API for scriptDB primerVBA API for scriptDB primer
VBA API for scriptDB primer
 
JPA 2.0
JPA 2.0JPA 2.0
JPA 2.0
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
 
JahiaOne - Jahia7: Query and Search API under the Hood
JahiaOne - Jahia7: Query and Search API under the HoodJahiaOne - Jahia7: Query and Search API under the Hood
JahiaOne - Jahia7: Query and Search API under the Hood
 
RubaDevi_Salesforce
RubaDevi_SalesforceRubaDevi_Salesforce
RubaDevi_Salesforce
 
Building social and RESTful frameworks
Building social and RESTful frameworksBuilding social and RESTful frameworks
Building social and RESTful frameworks
 
Prairie DevCon 2015 - Crafting Evolvable API Responses
Prairie DevCon 2015 - Crafting Evolvable API ResponsesPrairie DevCon 2015 - Crafting Evolvable API Responses
Prairie DevCon 2015 - Crafting Evolvable API Responses
 
Introduction to GraphQL and AWS Appsync on AWS - iOS
Introduction to GraphQL and AWS Appsync on AWS - iOSIntroduction to GraphQL and AWS Appsync on AWS - iOS
Introduction to GraphQL and AWS Appsync on AWS - iOS
 

More from Christian Rokitta

Hitchhiker's guide to the Universal Theme
Hitchhiker's guide to the Universal ThemeHitchhiker's guide to the Universal Theme
Hitchhiker's guide to the Universal ThemeChristian Rokitta
 
Browser Developer Tools for APEX Developers
Browser Developer Tools for APEX DevelopersBrowser Developer Tools for APEX Developers
Browser Developer Tools for APEX DevelopersChristian Rokitta
 
Bootstrapify Universal Theme
Bootstrapify Universal ThemeBootstrapify Universal Theme
Bootstrapify Universal ThemeChristian Rokitta
 
5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)Christian Rokitta
 

More from Christian Rokitta (6)

Keep me moving goin mobile
Keep me moving   goin mobileKeep me moving   goin mobile
Keep me moving goin mobile
 
Hitchhiker's guide to the Universal Theme
Hitchhiker's guide to the Universal ThemeHitchhiker's guide to the Universal Theme
Hitchhiker's guide to the Universal Theme
 
Browser Developer Tools for APEX Developers
Browser Developer Tools for APEX DevelopersBrowser Developer Tools for APEX Developers
Browser Developer Tools for APEX Developers
 
Bootstrapify Universal Theme
Bootstrapify Universal ThemeBootstrapify Universal Theme
Bootstrapify Universal Theme
 
Challenges going mobile
Challenges going mobileChallenges going mobile
Challenges going mobile
 
5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)
 

Recently uploaded

Advanced Flow Concepts Every Developer Should Know
Advanced Flow Concepts Every Developer Should KnowAdvanced Flow Concepts Every Developer Should Know
Advanced Flow Concepts Every Developer Should KnowPeter Caitens
 
Tree in the Forest - Managing Details in BDD Scenarios (live2test 2024)
Tree in the Forest - Managing Details in BDD Scenarios (live2test 2024)Tree in the Forest - Managing Details in BDD Scenarios (live2test 2024)
Tree in the Forest - Managing Details in BDD Scenarios (live2test 2024)Gáspár Nagy
 
How to install and activate eGrabber JobGrabber
How to install and activate eGrabber JobGrabberHow to install and activate eGrabber JobGrabber
How to install and activate eGrabber JobGrabbereGrabber
 
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...Alluxio, Inc.
 
Implementing KPIs and Right Metrics for Agile Delivery Teams.pdf
Implementing KPIs and Right Metrics for Agile Delivery Teams.pdfImplementing KPIs and Right Metrics for Agile Delivery Teams.pdf
Implementing KPIs and Right Metrics for Agile Delivery Teams.pdfVictor Lopez
 
AI/ML Infra Meetup | Perspective on Deep Learning Framework
AI/ML Infra Meetup | Perspective on Deep Learning FrameworkAI/ML Infra Meetup | Perspective on Deep Learning Framework
AI/ML Infra Meetup | Perspective on Deep Learning FrameworkAlluxio, Inc.
 
Designing for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web ServicesDesigning for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web ServicesKrzysztofKkol1
 
Secure Software Ecosystem Teqnation 2024
Secure Software Ecosystem Teqnation 2024Secure Software Ecosystem Teqnation 2024
Secure Software Ecosystem Teqnation 2024Soroosh Khodami
 
Breaking the Code : A Guide to WhatsApp Business API.pdf
Breaking the Code : A Guide to WhatsApp Business API.pdfBreaking the Code : A Guide to WhatsApp Business API.pdf
Breaking the Code : A Guide to WhatsApp Business API.pdfMeon Technology
 
CompTIA Security+ (Study Notes) for cs.pdf
CompTIA Security+ (Study Notes) for cs.pdfCompTIA Security+ (Study Notes) for cs.pdf
CompTIA Security+ (Study Notes) for cs.pdfFurqanuddin10
 
INGKA DIGITAL: Linked Metadata by Design
INGKA DIGITAL: Linked Metadata by DesignINGKA DIGITAL: Linked Metadata by Design
INGKA DIGITAL: Linked Metadata by DesignNeo4j
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2
 
JustNaik Solution Deck (stage bus sector)
JustNaik Solution Deck (stage bus sector)JustNaik Solution Deck (stage bus sector)
JustNaik Solution Deck (stage bus sector)Max Lee
 
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?XfilesPro
 
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERRORTROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERRORTier1 app
 
AI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAG
AI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAGAI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAG
AI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAGAlluxio, Inc.
 
KLARNA - Language Models and Knowledge Graphs: A Systems Approach
KLARNA -  Language Models and Knowledge Graphs: A Systems ApproachKLARNA -  Language Models and Knowledge Graphs: A Systems Approach
KLARNA - Language Models and Knowledge Graphs: A Systems ApproachNeo4j
 
OpenChain @ LF Japan Executive Briefing - May 2024
OpenChain @ LF Japan Executive Briefing - May 2024OpenChain @ LF Japan Executive Briefing - May 2024
OpenChain @ LF Japan Executive Briefing - May 2024Shane Coughlan
 
Microsoft 365 Copilot; An AI tool changing the world of work _PDF.pdf
Microsoft 365 Copilot; An AI tool changing the world of work _PDF.pdfMicrosoft 365 Copilot; An AI tool changing the world of work _PDF.pdf
Microsoft 365 Copilot; An AI tool changing the world of work _PDF.pdfQ-Advise
 
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...Andrea Goulet
 

Recently uploaded (20)

Advanced Flow Concepts Every Developer Should Know
Advanced Flow Concepts Every Developer Should KnowAdvanced Flow Concepts Every Developer Should Know
Advanced Flow Concepts Every Developer Should Know
 
Tree in the Forest - Managing Details in BDD Scenarios (live2test 2024)
Tree in the Forest - Managing Details in BDD Scenarios (live2test 2024)Tree in the Forest - Managing Details in BDD Scenarios (live2test 2024)
Tree in the Forest - Managing Details in BDD Scenarios (live2test 2024)
 
How to install and activate eGrabber JobGrabber
How to install and activate eGrabber JobGrabberHow to install and activate eGrabber JobGrabber
How to install and activate eGrabber JobGrabber
 
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
 
Implementing KPIs and Right Metrics for Agile Delivery Teams.pdf
Implementing KPIs and Right Metrics for Agile Delivery Teams.pdfImplementing KPIs and Right Metrics for Agile Delivery Teams.pdf
Implementing KPIs and Right Metrics for Agile Delivery Teams.pdf
 
AI/ML Infra Meetup | Perspective on Deep Learning Framework
AI/ML Infra Meetup | Perspective on Deep Learning FrameworkAI/ML Infra Meetup | Perspective on Deep Learning Framework
AI/ML Infra Meetup | Perspective on Deep Learning Framework
 
Designing for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web ServicesDesigning for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web Services
 
Secure Software Ecosystem Teqnation 2024
Secure Software Ecosystem Teqnation 2024Secure Software Ecosystem Teqnation 2024
Secure Software Ecosystem Teqnation 2024
 
Breaking the Code : A Guide to WhatsApp Business API.pdf
Breaking the Code : A Guide to WhatsApp Business API.pdfBreaking the Code : A Guide to WhatsApp Business API.pdf
Breaking the Code : A Guide to WhatsApp Business API.pdf
 
CompTIA Security+ (Study Notes) for cs.pdf
CompTIA Security+ (Study Notes) for cs.pdfCompTIA Security+ (Study Notes) for cs.pdf
CompTIA Security+ (Study Notes) for cs.pdf
 
INGKA DIGITAL: Linked Metadata by Design
INGKA DIGITAL: Linked Metadata by DesignINGKA DIGITAL: Linked Metadata by Design
INGKA DIGITAL: Linked Metadata by Design
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
 
JustNaik Solution Deck (stage bus sector)
JustNaik Solution Deck (stage bus sector)JustNaik Solution Deck (stage bus sector)
JustNaik Solution Deck (stage bus sector)
 
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
 
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERRORTROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
 
AI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAG
AI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAGAI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAG
AI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAG
 
KLARNA - Language Models and Knowledge Graphs: A Systems Approach
KLARNA -  Language Models and Knowledge Graphs: A Systems ApproachKLARNA -  Language Models and Knowledge Graphs: A Systems Approach
KLARNA - Language Models and Knowledge Graphs: A Systems Approach
 
OpenChain @ LF Japan Executive Briefing - May 2024
OpenChain @ LF Japan Executive Briefing - May 2024OpenChain @ LF Japan Executive Briefing - May 2024
OpenChain @ LF Japan Executive Briefing - May 2024
 
Microsoft 365 Copilot; An AI tool changing the world of work _PDF.pdf
Microsoft 365 Copilot; An AI tool changing the world of work _PDF.pdfMicrosoft 365 Copilot; An AI tool changing the world of work _PDF.pdf
Microsoft 365 Copilot; An AI tool changing the world of work _PDF.pdf
 
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
 

Plugins unplugged

  • 2.
  • 4. APEX Versions vs Plug-in Features 5 4
  • 6. APEX Page States Generate HTML Templates, Definitions Resources CSS, JS, Images Dynamic Actions Inline JS AJAX Calls (DB) Submitting Form Validating Processing
  • 7. Reasons for Using APEX declarative: hiding complexity behind properties; especially HTML, CSS and JavaScript catalogue of build-in components
  • 8. Limitations common components evolving standards evolving browser/device capabilities users expectations
  • 9. APEX is an Extensible Framework Add additional declarative functionality
  • 11. Plug-in Types vs Page States
  • 17. Authentication Type Plug-in Authentication schemes are used to determine if the user can access the application. As such it is not run on a page or component level.
  • 18. When to use Plug-ins not possible with standard declarative APEX hiding complexity reusability (application, instance, public) maintainability
  • 19. Skills to build APEX Plug-ins SQL PL/SQL
  • 22. Inspiration write your own cut-n-paste code libraries/jQuery Plug-ins Lots of well-know public available APEX plug-ins are based on existing JS/jQ solutions
  • 23.
  • 26. jQuery Plug-in Wishlist • JS/CSS files/library • Doc, HTML Example, how-to, … • Options (Configuration) • Methods (API) • Events
  • 28.
  • 30. Common Plug-in Structure Plugin PL/SQL function signature • render • AJAX-callback PL/SQL Types • configuration • state • parameter passing APEX PL/SQL API helper • include JS and CSS files • … APEX JavaScript API • initiate AJAX calls • …
  • 31. Render Function function <name of function> ( p_<type> in apex_plugin.t_<type> , p_plugin in apex_plugin.t_plugin [, p_...] ) return apex_plugin.t_<type>_render_result
  • 32. apex_plugin.t_<type> type t_<type> is record ( <param n> … , <param n> , attribute_01 varchar2(32767) … , attribute_NN varchar2(32767) ); std. declarative attributes additional plug-in specific attributes (page component) APEX Version dependencies
  • 33. apex_plugin.t_plugin type t_plugin is record ( name varchar2(45), file_prefix varchar2(4000), attribute_01 varchar2(32767), … , attribute_15 varchar2(32767) ); APEX 4 max 10 attr. additional plug-in specific attributes application level (Component Settings)
  • 34. Item Type Render Function function <name of function> ( p_item in apex_plugin.t_item_item , p_plugin in apex_plugin.t_plugin , p_value in varchar2 , p_is_readonly in boolean , p_is_printer_friendly in boolean ) return apex_plugin.t_page_item_render_result
  • 35. t_page_item type t_page_item is record ( id number , name varchar2(255) , label varchar2(4000) , plain_label varchar2(4000) , label_id varchar2(255) , placeholder varchar2(255) , format_mask varchar2(255) , is_required boolean , lov_definition varchar2(4000) , lov_display_extra boolean , lov_display_null boolean , lov_null_text varchar2(255) , lov_null_value varchar2(255) , lov_cascade_parent_items varchar2(255) , ajax_items_to_submit varchar2(255) , ajax_optimize_refresh boolean , element_width number , element_max_length number , element_height number , element_css_classes varchar2(255) , element_attributes varchar2(2000) , element_option_attributes varchar2(4000) , escape_output boolean , attribute_01 varchar2(32767) , … , attribute_15 varchar2(32767));
  • 36. Coding the Render Function generate HTML for object include assets (JS, CSS, …) generate JS snippets
  • 37. Coding the 3 Simple Steps sys.htp.p('<input type="text" id="'||p_page_item.id|| ' name="'||p_page_item.name||'" />'); apex_javascript.add_onload_code ( p_code => '$( "#'||p_page_item.id||'" ).timeDropper();' ,p_key => null ); apex_javascript.add_library (p_name => 'timedropper' , p_directory => p_plugin.file_prefix , p_check_to_add_minified => true ); apex_css.add_file (p_name => 'timefropper' , p_directory => p_plugin.file_prefix );
  • 38. Basic Demo Render Function function render_timedropper(p_item in apex_plugin.t_page_item , p_plugin in apex_plugin.t_plugin , p_value in varchar2 , p_is_readonly in boolean , p_is_printer_friendly in boolean) return apex_plugin.t_page_item_render_result is v_result apex_plugin.t_page_item_render_result; begin apex_javascript.add_library(p_name => 'timedropper‘ , p_directory => p_plugin.file_prefix, p_check_to_add_minified => true); apex_css.add_file(p_name => 'timefropper', p_directory => p_plugin.file_prefix); sys.htp.p('<input type="text" id="' || p_page_item.id || '" name="' || p_page_item || '" />'); apex_javascript.add_onload_code(p_code => '$( "#' || p_page_item.id || '" ).timeDropper();', p_key => null); return v_result; end;
  • 39.
  • 40. Beyond Basic Render Function item (component) std. attributes validation (for item type plugin) AJAX Callback
  • 41. Page Item Type Validation Callback type t_page_item_validation_result is record( message varchar2(32767) , display_location varchar2(40) , page_item_name varchar2(255) );
  • 42. Plug-in AJAX Callback function <name of function> ( p_<type> in apex_plugin.t_<type>, p_plugin in apex_plugin.t_plugin ) return apex_plugin.t_<type>_ajax_result
  • 43. Callin the AJAX Callback apex.server.plugin ( pAjaxIdentifier, { /*apex_plugin.get_ajax_identifier*/ x01-10: "...", pageItems: "#P1_DEPTNO,#P1_EMPNO" }, { refreshObject: "#P1_MY_LIST", loadingIndicator: "#P1_MY_LIST", success: function( pData ) { ... do something ... }, any jQuery.ajax option, });
  • 45.
  • 46. Q&A