Formula Field

by chrischilcoat

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<div class="text-right">
  <a href=""><span class="glyphicon glyphicon-wrench"></span> Cnfiguration</a>
</div>
<div id="carousel-example-generic" class="carousel stop" data-ride="carousel">

  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox" style="overflow:visible;">
    <div class="item active">
     
     
      <div class="row">
        <div class="col-xs-12">  
          <div class="panel-body">
            <div class="row ui-dashboard-field-wrapper">
              <div class="col-sm-3">
                <div class="panel panel-default">
                  <div class="panel-body">
                    <div class="panel panel-primary"> 
                      <div class="panel-heading"> 
                        <h3 class="panel-title">Widget</h3>
                        <p>...</p> 
                      </div> 
                      <div class="panel-body bg-primary text-center" style="">
                        <h1>45</h1>
                      </div> 
                    </div>
                  </div>
                  <div class="panel-footer text-center">
                    <button class="btn btn-default btn-sm">Select</button>
                  </div>
             ...

CSS

body {
  margin: 20px;
}
.panel-body .fa-plus {
  font-size: 15px;
}
.panel .panel {
  margin: 10px 0;
}
.panel .panel .panel-body {
  min-height: 100px;
  vertical-align: middle;
  padding: 20% 0;
}
.panel .panel .panel-footer {
  min-height: 100px;
  vertical-align: middle;
  padding: 30px 0;
}
.editable {
  display: inline-block;
  min-width: 30px;
  min-height: 15px;
}
.ui-cursor-editable {
  cursor: url("https://yakabod.yakabox.com/images/ui-cursor-editable-win7.cur"), pointer;
}
.carousel {
  height: 400px;
}
.carousel-control {
  width: 55px;
  height:50px;
  top:50%;
  margin-top:-25px;
}
.carousel-control .glyphicon {
  top:50%;
}
.ui-yakabox-input-line {
  margin-top:130px;
  display:inline-block;
  font-size: 20px;
  border-bottom:2px solid gray;
  padding:10px;
  min-width:400px;
}
.ui-contenteditable,
.ui-contenteditable2{
  min-width:300px;
  display: inline-block;
  text-align:left;
}
.dropdown-menu {
  left: 0;
  top: 33px;
  width: 100%;
}
.ui-dashboard-field-wrapper {
font-size:19px;
}
.ui-dashboard-field-wrapper .input-group {
  background:none;
  border-bottom:2px solid gray;
}
.ui-dashboard-field-wrapper .input-group-addon,
.ui-dashboard-field-wrapper .form-control {
  background:none;
  border:none;
  box-shadow:none;
font-size:19px;
  
}

JavaScript

$('.carousel').carousel('pause');

$('.btnSW').on('click', function() {
  $('.carousel').carousel('next');
});

$('.ui-contenteditable').on('focus', function() {
  $(this).html(' ');
});

$('.ui-contenteditable2').on('focus', function() {
  $(this).html(' ');
});

$('.ui-resource').on('click', function() {
  $('.carousel').carousel('next');
});

$('.ui-field').on('click', function() {
  $('.carousel').carousel('next');
});







/*
var $btnAI = $(".btnAI"),
    $btnDI = $(".btnDI"),
    $btnYI = $(".btnYI"),
    $btnPI = $(".btnPI"),
    $btnPAI = $(".btnPAI"),
    $btnIS = $(".btnIS"),
    $btnP = $(".btnP"),
    $btnI = $(".btnI"),
    $btnS = $(".btnS"),
    $btnD = $(".btnD"),
    $btnA = $(".btnA"),
    $inputAI = $(".inputAI"),
    $inputDI = $(".inputDI"),
    $inputYI = $(".inputYI"),
    $inputPI = $(".inputPI"),
    $inputPAI = $(".inputPAI"),
    $inputIS = $(".inputIS"),
    $inputC = $('.inputC'),
    $inputCP = '<span class="input-group-addon inputCP ui-cursor-editable"><span class="editable" data-toggle="tooltip" title="" data-original-title="Type here to edit text..." contenteditable="true">Prefix</span></span>',
    $inputCI = '<input type="text" class="form-control inputCI" placeholder="Type here to add placeholder text...">',
    $inputCS = '<span class="input-group-addon inputCS ui-cursor-editable"><span class="editable" data-toggle="tooltip" title="" data-original-title="Type here to edit text" contenteditable="true">Suffix</span></span>',
    $inputCD = '<span class="input-group-addon inputCD ui-cursor-editable">2018-12-14</span>',
    $inputCA = '<span class="input-group-addon inputCA ui-cursor-editable">0000001</span>',
    $inputCInnerHtml = {},
    $inputDefault = $(".inputDefault"),
    $btnShowC = $('.btnShowC'),
    $btnShowP = $('.btnShowP'),
    $panelC = $('.panelC'),
    $panelP = $('.panelP'),
    
    showAddFieldBtn = function(){
      $btnAddField.fadeIn();
    },
    hideAddFieldBtn = function(){
     ...