Drop-down Field and Upload field same line

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
avan
Posts: 9
Joined: 2019-02-09 12:41

Drop-down Field and Upload field same line

Post by avan » 2019-02-10 03:24

Good evening everyone!

I’m trying to have the drop-down field and upload field all on one horizontal line. Example below and also in the attachment:

Description, Drop-down Field, Upload Field
Attachments
Horizontal - Dropdown + Upload - Same Line.PNG
Horizontal - Dropdown + Upload - Same Line.PNG (10.83 KiB) Viewed 4253 times

bescott53

Re: Drop-down Field and Upload field same line

Post by bescott53 » 2019-02-11 18:39

Avan no sure I understand your requirements exactly but if you put the following into your hooks/table.php (table being the name of your file)

Go to the function table_dv

Code: Select all

/* change the layout only if this is not the print preview */
		if(isset($_REQUEST['dvprint_x'])) return;
		
		ob_start(); ?>
		
		<script>
			$j(function(){
				$j('fieldset.form-horizontal').removeClass('form-horizontal').addClass('form-inline');
				
				/* Fix for a bug with lookup drop-downs and date fields to set their correct width */
				setInterval(function() {
					$j('.select2-container')
						.parents('.form-control-static')
						.removeClass('form-control-static');
					$j('table.form-control-static').removeClass('form-control-static');
				}, 1000);
			})
		</script>
		
		<style>
			@media (min-width: 768px){
				.form-inline .form-group{
					width: 48%;
					margin-bottom: 0.75em;
					vertical-align: top;
				}
			}
			/* fixing width of input fields */
			.form-inline .form-control {
				width: 100% !important;
			}
		</style>
		
		<?php
		$new_layout = ob_get_contents();
		ob_end_clean();
		
		$html .= $new_layout;
	}

avan
Posts: 9
Joined: 2019-02-09 12:41

Re: Drop-down Field and Upload field same line

Post by avan » 2019-02-12 21:50

I'm trying to make the dropdown field and the upload field right next to each other in line horizontal line. Example:

Damages - Dropdown that let me select the type of Damages - Upload field that let me upload a file.

Basically, i just want it to look nice by being all next to each other horizontally instead it being on top of each other (vertically).

bescott53

Re: Drop-down Field and Upload field same line

Post by bescott53 » 2019-02-12 22:01

did you try what I gave you?

avan
Posts: 9
Joined: 2019-02-09 12:41

Re: Drop-down Field and Upload field same line

Post by avan » 2019-02-13 02:10

I apologizes for my confusion and lack of understanding - I'm trying to find where this file is located at or insert these statements.

Can you give me an example ? Again, sorry for my lack of understanding.

avan
Posts: 9
Joined: 2019-02-09 12:41

Re: Drop-down Field and Upload field same line

Post by avan » 2019-02-13 02:53

How would I be able to accomplish the fields below as example:

First line - Full Name
Second Line – Address, Upload Doc

bescott53

Re: Drop-down Field and Upload field same line

Post by bescott53 » 2019-02-13 14:39

Avan, I explained where to put this

go to your hooks folder first /hooks. You then need to look for the tablename.php file where tablename is the name of your table.

once you have found the file open it and scroll down until you see the following function function table_dv where table is the name of your table

avan
Posts: 9
Joined: 2019-02-09 12:41

Re: Drop-down Field and Upload field same line

Post by avan » 2019-02-13 20:05

Thank you so much, it worked!! You are the best.

I have one question:

If I wanted some line to have a one field and some line to have two fields, how do I do that ?

Example –

First line – Address Field
Second Line – Date Field, Upload Field
Third Line – Phone Number Field
Fourth line – Date Field, Upload Field

bescott53

Re: Drop-down Field and Upload field same line

Post by bescott53 » 2019-02-13 21:19

You could change the /templates/yourtable.DV.php file. but one issue with this is that any changes you make will be overwritten Avan. If you post some of your code from the /templates/yourtable.DV.php it may help to point you in the right direction

avan
Posts: 9
Joined: 2019-02-09 12:41

Re: Drop-down Field and Upload field same line

Post by avan » 2019-02-14 20:10

I see a HTML file name Louisiana_Land_Trust_templateDV. is this the file?

Lousisana_Land_Trust is my table name

bescott53

Re: Drop-down Field and Upload field same line

Post by bescott53 » 2019-02-14 21:06

yes thats the one then

avan
Posts: 9
Joined: 2019-02-09 12:41

Re: Drop-down Field and Upload field same line

Post by avan » 2019-02-14 22:13

Here is the sample at the top of the file:

<!-- Edit this file to change the layout of the detail view form -->

<a name="detail-view"></a>
<div class="panel-heading"><h3 class="panel-title"><strong><%%DETAIL_VIEW_TITLE%%></strong></h3></div>

<div class="panel-body" id="Louisiana_Land_Trust_dv_container">
<!-- child links -->
<div class="row vspacer-md">
<div class="col-xs-12">
<a class="hidden-xs btn btn-default btn-lg pull-right hidden hspacer-sm" href="property_photos_view.php?filterer_property=<%%URLVALUE(id)%%>&<%%EMBEDDED%%>" id="property_photos_link"><i class="glyphicon glyphicon-list-alt"></i> Property photos</a>
<a class="visible-xs btn btn-default btn-lg btn-block hidden vspacer-sm" href="property_photos_view.php?filterer_property=<%%URLVALUE(id)%%>&<%%EMBEDDED%%>" id="xs_property_photos_link"><i class="glyphicon glyphicon-list-alt"></i> Property photos</a>
<input type="hidden" id="property_photos_hclink" value="property_photos_view.php?filterer_property=<%%URLVALUE(id)%%>&<%%EMBEDDED%%>">
<div class="clearfix"></div>
</div>
</div>
<hr class="hidden-xs hidden-sm">

<div class="row">
<!-- form inputs -->
<div class="col-md-8 col-lg-10" id="Louisiana_Land_Trust_dv_form">
<fieldset class="form-horizontal">

<div class="form-group">
<hr class="hidden-md hidden-lg">
<label class="control-label col-lg-3">Cover photo <i class="glyphicon glyphicon-info-sign text-info" data-toggle="collapse" data-target="#photo-description"></i></label>
<div class="col-lg-9">
<span class="help-block collapse" id="photo-description"><div class="alert alert-info">Maximum file size allowed: 2000 KB.<br>Allowed file types: jpg, jpeg, gif, png</div></span>

<div class="form-control-static"><div class="pull-left">

<img src="<%%TRANSLATION(ImageFolder)%%><%%VALUE(photo)%%>" class="img-responsive img-thumbnail" id="photo-image">
</div>

<div class="pull-right" style="overflow-x: hidden;">
<div class="hidden-md hidden-lg vspacer-lg"></div>
<%%UPLOADFILE(photo)%%>
<%%REMOVEFILE(photo)%%>
</div>
<div class="clearfix"></div>
</div>

</div>
</div>

<div class="form-group">
<hr class="hidden-md hidden-lg">
<label for="Address" class="control-label col-lg-3">Address<span class="text-danger"><%%TRANSLATION(*)%%></span></label>
<div class="col-lg-9">
<input maxlength="150" type="text" class="form-control" name="Address" id="Address" value="<%%VALUE(Address)%%>" required>
</div>
</div>

<div class="form-group">
<hr class="hidden-md hidden-lg">
<label for="id" class="control-label col-lg-3">UID</label>
<div class="col-lg-9">
<input maxlength="" type="text" class="form-control" name="id" id="id" value="<%%VALUE(id)%%>" required>
</div>
</div>

<div class="form-group">
<hr class="hidden-md hidden-lg">
<label for="Acquired_By_LLT" class="control-label col-lg-3">Acquired By LLT </label>
<div class="col-lg-9">
<%%COMBO(Acquired_By_LLT)%%>
</div>
</div>

<div class="form-group">
<hr class="hidden-md hidden-lg">
<label class="control-label col-lg-3">LLT Acquisition Upload<span class="text-danger"><%%TRANSLATION(*)%%></span> <i class="glyphicon glyphicon-info-sign text-info" data-toggle="collapse" data-target="#LLT_Upload-description"></i></label>
<div class="col-lg-9">
<span class="help-block collapse" id="LLT_Upload-description"><div class="alert alert-info">Maximum file size allowed: 1000 KB.<br>Allowed file types: txt, doc, docx, docm, odt, pdf, rtf</div></span>


<div class="row">
<div class="col-md-1">
<a id="LLT_Upload-link" href="link.php?t=Louisiana_Land_Trust&f=LLT_Upload&i=<%%VALUE(id)%%>" target="_blank"><i class="glyphicon glyphicon-file" title="<%%VALUE(LLT_Upload)%%>" style="font-size: x-large; top: .35em;"></i></a>
</div> <!-- /div.col-* -->
<script>jQuery(function(){ /* */ var e_LLT_Upload = '<%%VALUE(LLT_Upload)%%>'; if(e_LLT_Upload == '' || e_LLT_Upload == '&nbsp;' || e_LLT_Upload == 'blank.gif') jQuery('#LLT_Upload-link').hide(); });</script> <div class="pull-right" style="overflow-x: hidden;">
<div class="hidden-md hidden-lg vspacer-lg"></div>
<%%UPLOADFILE(LLT_Upload)%%>
</div>
<div class="clearfix"></div>
</div>

</div>
</div>

<div class="form-group">
<hr class="hidden-md hidden-lg">
<label for="Assign_to_BHA" class="control-label col-lg-3">Assign to BHA<span class="text-danger"><%%TRANSLATION(*)%%></span></label>
<div class="col-lg-9">
<%%COMBO(Assign_to_BHA)%%>
</div>
</div>

<div class="form-group">
<hr class="hidden-md hidden-lg">
<label for="Property_assessment" class="control-label col-lg-3">Property Assessment <span class="text-danger"><%%TRANSLATION(*)%%></span></label>
<div class="col-lg-9">
<%%COMBO(Property_assessment)%%>
</div>
</div>

Post Reply