Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Extending OutSystems with Javascript

336 views

Published on

Did you know OutSystems enables you to use JavaScript to costumize how users interact with your applications? In this session, see how we've developed and extended patterns over the years and learn the best practices you can follow.

Link with resources: https://bit.ly/2F8P29j

Published in: Engineering
  • Be the first to comment

Extending OutSystems with Javascript

  1. 1. Extending OutSystems with JavaScript 1
  2. 2. | Extending OutSystems with JavaScript Rita Dias Front End Software Engineer | OutSystems 2 JavaScript is @ in rita.dias@outsystems.com /ritasdias @arita_dias /ritasdias
  3. 3. 3 Why? @arita_dias, #OWDC
  4. 4. 4 @arita_dias, #OWDC
  5. 5. 5 How? @arita_dias, #OWDC
  6. 6. 6 @arita_dias, #OWDC Advanced Format For patterns (Silk UI, OutSystemsUI, Charts) OutSystems API JavaScript functions that are applied to mobile apps Library Functions For patterns (Silk UI, OutSystems UI)
  7. 7. 7 @arita_dias, #OWDC Advanced Format For patterns (Silk UI, OutSystems UI, Charts) Library Functions For patterns (Silk UI, OutSystems UI) OutSystems API JavaScript functions that are applied to mobile apps
  8. 8. 8 @arita_dias, #OWDC OutSystems API Mobile-only App-wide
  9. 9. | Extending OutSystems with JavaScript OutSystems JavaScript API 9 @arita_dias, #OWDC
  10. 10. 10 @arita_dias, #OWDC OutSystems API
  11. 11. 11 @arita_dias, #OWDC https://goo.gl/YuWBcj, or just google ‘OutSystems JavaScript API’, it’s the first result OutSystems API
  12. 12. 12 @arita_dias, #OWDC
  13. 13. 13 @arita_dias, #OWDC OutSystems API https://goo.gl/pU6bNK, or just google ‘OutSystems JavaScript API Navigation’
  14. 14. 14 @arita_dias, #OWDC
  15. 15. 15 @arita_dias, #OWDC (break for water and demo) OutSystems API
  16. 16. 16 @arita_dias, #OWDC Advanced Format For patterns (Silk UI, OutSystems UI, Charts) OutSystems API JavaScript functions that are applied to mobile apps Library Functions For patterns (Silk UI, OutSystems UI)
  17. 17. 17 @arita_dias, #OWDC Patterns Library Functions Functions/Actions
  18. 18. | Extending OutSystems with JavaScript Library Functions 18 @arita_dias, #OWDC
  19. 19. 19 @arita_dias, #OWDC Library Functions
  20. 20. 20 @arita_dias, #OWDC Library Functions
  21. 21. 21 return { init: function(opts) { initCarousel(opts); }, // Destroy dots and recreate them for each element on list (usually used after list remove) updateCarousel: function() { ... }, goTo: function(target) { ... }, previous: function() { ... }, next: function() { ... }, // Return number of items inside carousel to pattern getMaxElements: function() { return options.maxElements; }, // Return number of items inside carousel to pattern getNodeWidth: function() { return options.nodeWidth; }, backToMiddle: function() { ... } };@arita_dias, #OWDC
  22. 22. 22 var element = document.getElementById($parameters.WidgetId).querySelector('.carousel-container-content') .goto($parameters.Target); @arita_dias, #OWDC
  23. 23. 23 @arita_dias, #OWDC Library Functions
  24. 24. 24 return { init: function(opts) { initCarousel(opts); }, // Destroy dots and recreate them for each element on list (usually used after list remove) updateCarousel: function() { ... }, goTo: function(target) { ... }, previous: function() { ... }, next: function() { ... }, // Return number of items inside carousel to pattern getMaxElements: function() { return options.maxElements; }, // Return number of items inside carousel to pattern getNodeWidth: function() { return options.nodeWidth; }, backToMiddle: function() { ... } };@arita_dias, #OWDC
  25. 25. 25 @arita_dias, #OWDC (break for water and demo) Library Functions
  26. 26. 26 @arita_dias, #OWDC OutSystems API JavaScript functions that are applied to mobile apps Library Functions For patterns (Silk UI, OutSystems UI) Advanced Format For patterns (Silk UI, OutSystems UI, Charts)
  27. 27. 27 @arita_dias, #OWDC Input Parameters Advanced Format Patterns
  28. 28. | Extending OutSystems with JavaScript Advanced Format 28 @arita_dias, #OWDC
  29. 29. 29 @arita_dias, #nxstep —Us, probably “The desired behavior can only be achieved if the pattern is cloned and the user extends it themselves.”
  30. 30. 30 @arita_dias, #OWDC Advanced Format
  31. 31. 31 @arita_dias, #OWDC
  32. 32. 32 @arita_dias, #OWDC Internal Code Developer https://www.highcharts.com /demo Advanced Format
  33. 33. 33 @arita_dias, #OWDC Internal Code Advanced Format
  34. 34. 34 @arita_dias, #OWDC Developer Advanced Format
  35. 35. 35 @arita_dias, #OWDC
  36. 36. 36 @arita_dias, #OWDC https://refreshless.com/nouislider/behaviour-option/
  37. 37. 37 @arita_dias, #OWDC
  38. 38. 38 @arita_dias, #OWDC (break for water and demo) Advanced Format
  39. 39. Simple! But... @arita_dias, #OWDC
  40. 40. 40 @arita_dias, #nxstep
  41. 41. 41 What about a more complicated use case? @arita_dias, #OWDC
  42. 42. 42 @arita_dias, #OWDC What we get out of the box: Advanced Format
  43. 43. 43 @arita_dias, #OWDC Which is good. Advanced Format
  44. 44. 44 @arita_dias, #OWDC Results from looking at 70 apps from targeted industries Advanced Format
  45. 45. 45 @arita_dias, #OWDC That being said, Advanced Format
  46. 46. 46 @arita_dias, #nxstep@arita_dias, #nxstep Advanced Format https://www.highcharts.com/demo @arita_dias, #OWDC
  47. 47. 47 @arita_dias, #OWDC https://www.highcharts.com/demoWhat if I want a single, simple solid gauge chart? Advanced Format
  48. 48. 48 @arita_dias, #OWDC Advanced Format Ok, so what now?
  49. 49. 49 Highcharts.chart('container', { title: { text: 'Solar Employment Growth by Sector, 2010-2016' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' }, plotOptions: { series: { label: { connectorAllowed: false }, pointStart: 2010 } }, series: [{ name: 'Installation', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] }, { name: 'Manufacturing', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] }, { name: 'Sales & Distribution', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] }, { ... @arita_dias, #OWDC
  50. 50. 50 @arita_dias, #OWDC https://bit.ly/2ArAgWV, solid-gauge highcharts demo
  51. 51. 51 @arita_dias, #OWDC <script src="https://code.highcharts.com/highcharts.js"> </script> <script src="https://code.highcharts.com/highcharts- more.js"> </script> <script src="https://code.highcharts.com/modules/solid- gauge.js"> </script>
  52. 52. 52 @arita_dias, #OWDC chart: { type: 'solidgauge', width: 200 }, title: null, pane: { center: ['50%', '85%'], size: '140%', startAngle: -90, endAngle: 90, background: { backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE', innerRadius: '60%', outerRadius: '100%', shape: 'arc' } }, tooltip: { enabled: false }, plotOptions: { solidgauge: { dataLabels: { y: 5, borderWidth: 0, useHTML: true } } }, ...
  53. 53. 53 @arita_dias, #OWDC (break for water and demo) Advanced Format
  54. 54. 54 @arita_dias, #OWDC More on this in the future :) Come talk to me about it.
  55. 55. 55 @arita_dias, #OWDC OutSystems API JavaScript functions that are applied to mobile apps Advanced Format For patterns (Silk UI, OutSystems UI, Charts) Library Functions For patterns (Silk UI, OutSystems UI)
  56. 56. 56 @arita_dias, #OWDC Mobile-Only App-Wide OutSystems API
  57. 57. 57 @arita_dias, #OWDC Functions/Actions Library Functions Patterns
  58. 58. 58 @arita_dias, #OWDC Patterns Input Parameters Advanced Format
  59. 59. 59 @arita_dias, #OWDC We’re constantly making an effort to extending our platform, from our patterns to the front end to the back end.
  60. 60. 60 @arita_dias, #OWDC So, let’s talk :)
  61. 61. 61 @arita_dias, #nxstep Thank You!
  62. 62. RATE THE SESSION Want to help us improve ODC even more? Then don’t forget:

×