November 20, 2019 APEX, Oracle No Comments

In continuation to my previous blog post about adding simple floating button. This blog is about how you can create a list template that will render as a Action Floating Button.

Following are the steps:

  • Add below CSS code to your page header or theme roller section – which ever is your preference.

.zoom {
  z-index:100;
  position: fixed;
  bottom: 45px;
  right: 24px;
  height: 70px;
}
.zoom-fab {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #009688;
  vertical-align: middle;
  text-decoration: none;
  text-align: center;
  transition: 0.2s ease-out;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  color: #FFF;
}
.zoom-btn-sm > span{
  margin: 10px;
}
.zoom-fab:hover {
  background-color: #4db6ac;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
.zoom-btn-large {
  width: 60px;
  height: 60px;
  line-height: 60px;
}
.zoom-btn-large > span{
  vertical-align: text-bottom;
}
.zoom-menu {
  position: absolute;
  right: 70px;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  width: 500px;
  list-style: none;
  text-align: right;
}
.zoom-menu li {
  display: inline-block;
  margin-right: 10px;
}
.scale-transition { transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important; }
.scale-transition.scale-out {
  transform: scale(0);
  transition: transform 0.2s !important;
}
.scale-transition.scale-in { transform: scale(1); }
  • Create new static list from shared component as “Floating Button”
    • List Entry 1
      • Image Class=”fa-plus”
      • List Entry Label=”Button 1″
      • Attribute 1=”1″
    • List Entry 2
      • Image Class=”fa-edit”
      • List Entry Label=”Button 2″
      • Attribute 1=”2″
    • List Entry 3
      • Image Class=”fa-trash”
      • List Entry Label=”Button 3″
      • Attribute 1=”3″
  • Create new list template from shared component as “Floating Menu Popup”
    • Got to shared component > templates > filter “List” template
    • Make copy of “Menu Popup” list template and create “Floating Menu Popup” template
    • Before List Entry section
      • List Template Before Rows
<div id=”#PARENT_STATIC_ID#_menu” class=”zoom #COMPONENT_CSS_CLASSES#”><a class=”zoom-fab zoom-btn-large” id=”zoomBtn”><span class=”fa fa-bars”></span></a><ul class=”zoom-menu”>
    • Template Definition section
      • List Template Current
<li data-id=”#A01#” data-disabled=”#A02#” data-hide=”#A03#” data-shortcut=”#A05#” data-icon=”#ICON_CSS_CLASSES#”><a href=”#LINK#” title=”#A04#” class=”zoom-fab zoom-btn-sm scale-transition scale-out u-color-#A01#-bg”><span class=”#ICON_CSS_CLASSES#”></span></a></li>
      • List Template Current with Sub-List item
<li data-id=”#A01#” data-disabled=”#A02#” data-hide=”#A03#” data-shortcut=”#A05#” data-icon=”#ICON_CSS_CLASSES#”><a href=”#LINK#” title=”#A04#” class=”zoom-fab zoom-btn-sm scale-transition scale-out u-color-#A01#-bg”><span class=”#ICON_CSS_CLASSES#”></span></a>
      • List Template Non-current
<li data-id=”#A01#” data-disabled=”#A02#” data-hide=”#A03#” data-shortcut=”#A05#” data-icon=”#ICON_CSS_CLASSES#”><a href=”#LINK#” title=”#A04#” class=”zoom-fab zoom-btn-sm scale-transition scale-out u-color-#A01#-bg”><span class=”#ICON_CSS_CLASSES#”></span></a></li>
      • List template Non-current with Sub-List item
<li data-id=”#A01#” data-disabled=”#A02#” data-hide=”#A03#” data-shortcut=”#A05#” data-icon=”#ICON_CSS_CLASSES#”><a href=”#LINK#” title=”#A04#” class=”zoom-fab zoom-btn-sm scale-transition scale-out u-color-#A01#-bg”><span class=”#ICON_CSS_CLASSES#”></span></a>
    • JavaScript section
      • Replace existing code with below in Execute when Page load section
$(‘#zoomBtn’).click(function() {
  $(‘.zoom-btn-sm’).toggleClass(‘scale-out’);
  if (!$(‘.zoom-card’).hasClass(‘scale-out’)) {
    $(‘.zoom-card’).toggleClass(‘scale-out’);
  }
});

$(‘.zoom-btn-sm’).click(function() {
  var btn = $(this);
  var card = $(‘.zoom-card’);
  if ($(‘.zoom-card’).hasClass(‘scale-out’)) {
    $(‘.zoom-card’).toggleClass(‘scale-out’);
  }
});
  • Create New List Region in your page
    • Create new region as “Floating Button Region”
      • Type = “List”
      • List = “Floating Buttons”
      • Template = “Blank with Attributes”
      • List Attributes
        • List Template = “Floating Menu Popup”
That’s it. ENJOY!!!
Hope this helps.
Regards,
Jaydip Bosamiya
jbosamiya@gmail.com
, , , ,
Written by Jaydip Bosamiya