Getting Started

 View Only
  • 1.  Custom code in Form

    Posted 01-13-2020 15:52
    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
    ------------------------------


  • 2.  RE: Custom code in Form

    Posted 01-13-2020 16:17

    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.




  • 3.  RE: Custom code in Form

    Posted 01-13-2020 16:25
    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:
    [List of Items (a list already exists)] [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
    ------------------------------



  • 4.  RE: Custom code in Form

    Posted 01-13-2020 16:51
    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.


  • 5.  RE: Custom code in Form

    Posted 01-13-2020 17:10
    This is turning out to be more complicated than I thought it was going to be.
    We have similar apps/forms that are built natively that have similar functionality to what we want. This particular app/form will be used in a warehouse so our goal was to give the warehouse workers a quick and easy way to input values other than typing a value in. Our thought for this was that it would decrease input errors.
    I will look into the IOL image on load technique but in the meantime will work on getting the app working natively then add the nice-haves (like the better UI) at a later date when the basic functionality is working.

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



  • 6.  RE: Custom code in Form

    Posted 01-16-2020 16:51
    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
    ------------------------------