Adding DataParts

1 minute to read

Design the layout and plan the content to display on your AppPages by adding DataParts.

In the Designer view, in the AppPages panel, click the label for the AppPage that you want to edit.
On the canvas, click Add elements.
In the list of DataParts, click the element type that you want to include in your AppPage, or drag it onto the desired location on the canvas.
For example, to add a list of records in the form of a table, in the Reports section, select Tabular.
In the configuration window for your new DataPart, configure the basic settings for your DataPart.
The initial configuration steps depend on the element type. For details on how to set up specific DataPart types, see:
Click Save.
Result: The new DataPart appears at the bottom of the AppPage and the right panel displays the settings that you can adjust for that DataPart.
In the right panel, configure detailed settings of your new DataPart.
For detailed steps, see DataParts.

code2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>  
<style>  
div[id^='container']{  
  width: 500px;  
  height: 250px;  
  overflow: hidden;  
}  
#slide{  
  width:100%;  
  height:100%;  
  transition: transform .3s;  
}  
img{  
  width: auto;  
  height: auto;  
  max-width:100%;  
  pointer-events: none;  
}  
</style>

code3

div[id^='container'] {  
  width: 500px;  
  height: auto;  
  overflow: auto;  
}

code4

<div id="container[@field:ID]"> 
     <div id="slide"> 
    		<img src="[@field:image_field/]"> 
     </div> 
</div> 
<script> 
document.addEventListener('DataPageReady', function (event) { 
var scroll_zoom = new ScrollZoom($('#container[@field:ID]'),5,0.5); 
}); 
//The parameters are: 
// 
//container: The wrapper of the element to be zoomed. The script will look for the first child of the container and apply the transforms to it. 
//max_scale: The maximum scale (4 = 400% zoom) 
//factor: The zoom-speed (1 = +100% zoom per mouse wheel tick) 
function ScrollZoom(container[@field:ID],max_scale,factor){ 
 var target = container[@field:ID].children().first(); 
 var size = {w:target.width(),h:target.height()}; 
 var pos = {x:0,y:0}; 
 var scale = 1; 
 var zoom_target = {x:0,y:0}; 
 var zoom_point = {x:0,y:0}; 
 var curr_tranform = target.css('transition'); 
 var last_mouse_position = { x:0, y:0 }; 
 var drag_started = 0; 
 target.css('transform-origin','0 0'); 
 target.on("mousewheel DOMMouseScroll",scrolled); 
 target.on('mousemove', moved); 
 target.on('mousedown', function() { 
  drag_started = 1; 
  target.css({'cursor':'move', 'transition': 'transform 0s'}); 
  /* Save mouse position */ 
  last_mouse_position = { x: event.pageX, y: event.pageY}; 
 }); 
 target.on('mouseup mouseout', function() { 
  drag_started = 0; 
  target.css({'cursor':'default', 'transition': curr_tranform}); 
 }); 
function scrolled(e){ 
  var offset = container[@field:ID].offset(); 
  zoom_point.x = e.pageX - offset.left; 
  zoom_point.y = e.pageY - offset.top; 
  e.preventDefault(); 
  var delta = e.delta || e.originalEvent.wheelDelta; 
  if (delta === undefined) { 
    //we are on firefox 
    delta = e.originalEvent.detail; 
  } 
  delta = Math.max(-1,Math.min(1,delta)) // cap the delta to [-1,1] for cross browser consistency 
  // determine the point on where the slide is zoomed in 
  zoom_target.x = (zoom_point.x - pos.x)/scale; 
  zoom_target.y = (zoom_point.y - pos.y)/scale; 
  // apply zoom 
  scale += delta * factor * scale; 
  scale = Math.max(1,Math.min(max_scale,scale)); 
  // calculate x and y based on zoom 
  pos.x = -zoom_target.x * scale + zoom_point.x; 
  pos.y = -zoom_target.y * scale + zoom_point.y; 
  update(); 
 } 
 function moved(event){ 
  if(drag_started == 1) { 
   var current_mouse_position = { x: event.pageX, y: event.pageY}; 
   var change_x = current_mouse_position.x - last_mouse_position.x; 
   var change_y = current_mouse_position.y - last_mouse_position.y; 
   /* Save mouse position */ 
   last_mouse_position = current_mouse_position; 
   //Add the position change 
   pos.x += change_x; 
   pos.y += change_y; 
  update(); 
  } 
 } 
function update(){ 
  // Make sure the slide stays in its container area when zooming out 
  if(pos.x>0) 
   pos.x = 0; 
  if(pos.x+size.w*scale<size.w) 
   pos.x = -size.w*(scale-1); 
  if(pos.y>0) 
   pos.y = 0; 
  if(pos.y+size.h*scale<size.h) 
   pos.y = -size.h*(scale-1); 
  target.css('transform','translate('+(pos.x)+'px,'+(pos.y)+'px) scale('+scale+','+scale+')'); 
 } 
} 
</script>