We create a seeker that translates ocl to sql for searching in databases of any size. We look at derivations, constraints and validation rules. <style>

1. video12 {

 position: relative;
 padding-bottom: 75%;

}

1. video12 iframe {

 position: absolute;
 width: calc(100% - 300px);
 height: calc(100% - 300px);

}

1. video12 div {

 position: absolute;
 top: 0;
 right: 0;
 width: 270px;
 height: 60%;
 padding: 10px;
 overflow-y: auto;

}

1. video12 span {

   font-size: 18;
   display:block;
 padding: 10px;
   padding-bottom: 0.5;
   padding-top: 0.5;
 opacity: 0.7;

}

 #video12 span:hover {
 color: #0000FF;
 cursor: pointer;

}

1. video12 span:focus {

 color: blue;

</style>

<iframe width="560" height="300" src="https://youtu.be/embed/BhKRj3-LoBI" frameborder="0" allowfullscreen></iframe>

 View Model Editor:
   Search expressions 
   Variables and Validations 
    Derivation Attribute 
   Visible expressions 
   Test data:
    Tab separated data import 
    Constraints 
    Validation Rules 
    Saving despite error warnings 
   

<script> var IMG = document.querySelectorAll('#video12 span'),

   IFRAME = document.querySelector('#video12 iframe');

for (var i = 0; i < IMG.length; i++) {

 IMG[i].onclick = function() {
   IFRAME.src = 'http://www.youtube.com/embed/' + this.dataset.video + '?rel=0&autoplay=1';
   if(this.dataset.end) IFRAME.src = IFRAME.src.replace(/([\s\S]*)/g, '$1&end=' + this.dataset.end);
   if(this.dataset.start) IFRAME.src = IFRAME.src.replace(/([\s\S]*)/g, '$1&start=' + this.dataset.start);
   this.style.backgroundColor='rgba(0,0,0,.2)';
 }

} </script> </html>