Forum Discussion

BlakeEstep's avatar
BlakeEstep
Qrew Trainee
5 years ago

Custom code in Form

I found a bootstrap script that will display as an input number roller. The code works and is on a code page. I can only access it by using a URL Formula Field. I made it appear as a button and when clicked it pops up and shows the roller. However, the value within the roller doesn't save and there's no way to exit.
What's the best way for the number roller to input the final value into a field?

Eventually, once I get this working, this will be combined with a popup to receive multiple inputs and output as a line item. you can then hit a "+" button to create a new line item. We'll cross that bridge when we get to it though.

Bootstrap Number roller Code page:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
	<div class="row">
		<div class="col-xs-6 col-xs-offset-3">
			<div class="input-group number-spinner">
				<span class="input-group-btn">
					<button class="btn btn-default" data-dir="dwndwndwn"><span class="glyphicon glyphicon-minus">10</span></button>
				</span>
				<span class="input-group-btn">
					<button class="btn btn-default" data-dir="dwndwn"><span class="glyphicon glyphicon-minus">5</span></button>
				</span>
				<span class="input-group-btn">
					<button class="btn btn-default" data-dir="dwn"><span class="glyphicon glyphicon-minus"></span></button>
				</span>
				<input type="text" class="form-control text-center" value="0">
				<span class="input-group-btn">
					<button class="btn btn-default" data-dir="up"><span class="glyphicon glyphicon-plus"></span></button>
				</span>
				<span class="input-group-btn">
					<button class="btn btn-default" data-dir="upup"><span class="glyphicon glyphicon-plus">5</span></button>
				</span>
				<span class="input-group-btn">
					<button class="btn btn-default" data-dir="upupup"><span class="glyphicon glyphicon-plus">10</span></button>
				</span>
			</div>
		</div>
	</div>
</div>
<script>
$(document).on('click', '.number-spinner button', function () {    
	var btn = $(this),
		oldValue = btn.closest('.number-spinner').find('input').val().trim(),
		newVal = 0;

	if (btn.attr('data-dir') == 'up') {
  		newVal = parseInt(oldValue) + 1;
	} else if (btn.attr('data-dir') == 'upup') {
  		newVal = parseInt(oldValue) + 5;
	} else if (btn.attr('data-dir') == 'upupup') {
  		newVal = parseInt(oldValue) + 10;
	} else if (btn.attr('data-dir') == 'dwn') {
		if (oldValue > 1) {
			newVal = parseInt(oldValue) - 1;
		} else {
			newVal = 0;
		}
	} else if (btn.attr('data-dir') == 'dwndwn') {
		if (oldValue > 5) {
			newVal = parseInt(oldValue) - 5;
		} else {
			newVal = 0;
		}
	} else if (btn.attr('data-dir') == 'dwndwndwn') {
		if (oldValue > 10) {
			newVal = parseInt(oldValue) - 10;
		} else {
			newVal = 0;
		}
	} else {
		if (oldValue > 1) {
			newVal = parseInt(oldValue) - 1;
		} else {
			newVal = 0;
		}
	}

	//if (btn.attr('data-dir') == 'up') {
	//	newVal = parseInt(oldValue) + 1;
	//} else {
	//	if (oldValue > 1) {
	//		newVal = parseInt(oldValue) - 1;
	//	} else {
	//		newVal = 0;
	//	}
	//}
	btn.closest('.number-spinner').find('input').val(newVal);
});
</script>​


URL-Formula Field:

"https://website.quickbase.com/db/bnhwf73ut?a=dbpage&pageID=10"


------------------------------
BlakeE
------------------------------
APIs and custom code
  • AustinK's avatar
    AustinK
    Qrew Commander
    5 years ago

    What's the best way for the number roller to input the final value into a field?
    With an API call I would think. Assuming the record is either already created or you need to create a new one straight from the code page.

    So what is the ultimate goal here? For it to be contained on a form, or are you okay with the code page? You want this to receive multiple inputs from where?

    Usually the way you would use a code page is to send data to it in the URL via a button or some other method. Then in your code page you parse the URL for the data you sent and do what you need to do in the code page then make an API call back to where you want to be with the data.

    • BlakeEstep's avatar
      BlakeEstep
      Qrew Trainee
      5 years ago
      It should be used/contained in a form.

      Eventually, the goal is to have a "+ item" button on the form and the following fields would show up:
        [number roller (to add how many of the item(s) there are)] [and a unit of measure field (this field is an existing one)]
        Clicking the "+ item" button again would add another line item with the same fields listed. The user can add as many line items as necessary until their count is complete.

        ------------------------------
        Blake E
        ------------------------------
      • AustinK's avatar
        AustinK
        Qrew Commander
        5 years ago
        Embedding that on a form is definitely possible but you are for sure venturing out into your own territory. Look into things like the IOL image on load technique. That allows you to run JavaScript on whatever page of QuickBase you want and would probably be required for that.

        To me it sounds like you could achieve what you said, minus the spiffy UI, with some table relationships and possibly an embedded grid edit report. It doesn't sound that crazy to me.

        Have you explored building this natively without code? If so, what are the issues you found? It is possible someone here might be able to point you in the right direction with that. I'm not the best at explaining relationships but there are lots of smart people here that are.
    • BlakeEstep's avatar
      BlakeEstep
      Qrew Trainee
      5 years ago
      After looking at this I cleaned up the process a bit. The only thing I need now is to figure out API calls. 
      I have a form that records when a truck returns with products.
      There is an embedded grid edit report with the product information. The ticker button is featured here. The button opens a separate tab and we can click until we get the desired value. I have a "submit" button that closes the tab. The only thing I need to figure out now is how to take the value and place it in my "QTY" field. I know this is done with API calls but I am still new to QuickBase and not familiar with the process for setting these up. Would the API call be on the code page or the button?

      ------------------------------
      Blake E
      ------------------------------