Category: JQuery

Tip: Adding your custom CSS to an AppGini project

Sometimes people ask me where to put CSS rules in AppGini projects. On this page I describe the options and tell you how I usually do it. Option 1: hooks/header-extras.php One way is to insert the CSS code in the already existing hooks/header-extras.php file. Since this is a .php file (not a .css file), however, we have to tell the browser that the inserted code is style information. We do this via the <style>-tag: Option 2: hooks/header-extras.css For larger projects, I got used to writing my CSS specifications in a separate .css file. In addition to the additional .css file …

AppGini / Cascading Stylesheets (CSS) / JQuery / Webdevelopment

Quickie: More space for content in Custom Pages

Custom pages are a great way to add any content to your app. If you have ever created your own custom pages, you may have noticed that quite a lot of space is wasted to the left and to the right of the actual content: Do you see the useless margins? In this case, the content is even too wide for the content-container and a scrollbar appears at the bottom. That doesn’t have to be! With a simple trick you can widen the usable area. Just place that script in your custom page: This gives you smaller margins on the …

AppGini / Bootstrap / Javascript (JS) / JQuery / Programming / Webdevelopment

Idea: Inject Child-Records into Table View

This idea came into my mind when I wanted to show additional information for records right inside the table view: The toggle-button opens a panel below the record, showing all configured subtables. This renders sub-tables for all configured tables right inside the table view just below each recod: I can realize this by configuring Children-Records in my AppGini project as usual… …and by adding a few lines of code to my hooks/TABLENAME-tv.js… See it in action This has to be tested more accurately. I consider adding it to some future version of AppGini Helper Javascript Library if there is more …

AppGini / Highlights of the day / Javascript (JS) / JQuery / Programming / Webdevelopment

Quickie: Modify Download Button

File-upload fields are one of many great features of AppGini-generated apps. In Table View (TV) and also in tables of children tabs in Detail View (DV) AppGini renders larger download buttons with blue default icon and no text, by default: In one of my projects, I wanted to change the appearance of that download button so that it matches the “Open” button (to the left of it) better, visually, and also add a caption for better usability. Example Default AppGini automatically renders a larger button with blue text-color (depending on your theme). Modified download button Same height as “open” button …

AppGini / AppGini Helper JavaScript Library / Javascript (JS) / JQuery / Webdevelopment

Convert input into Calculator

I often use numeric fields for prices, taxes, etc. And often I use the Windows Calculator for side-calculations, for example, for converting from net to gross, from gross to net, for calculating VAT or for calculating discounts. With my new AppGini Calculator Component I am able to run side-calculations directly in my AppGini Detail View Form. Example Take a look at this part of my Orders Detail View. There is a subtotal field which is just numeric input by default. Parameter subtotal is the name of the field. After reloading the page there is a button now which will will …

AppGini / Highlights of the day / Javascript (JS) / JQuery / Programming / Webdevelopment

Autohide children-tabs, show on hover

If you, like me, like to make the most of the available space, then maybe this idea is something for you. Tracking Software In a small project, any file* can be sent (by delivery service) from one location to another location of the same organization and tracked using a QR code. * This project is all about physical document files, file-folders or boxes full of documents like court-files/court-records, which sometimes have to be physically sent to a different place. It is not about digital files. As a result, everyone involved across locations knows where which file is at any given …

AppGini / Highlights of the day / Javascript (JS) / JQuery

Styling a Table View: a step-by-step example

After we took care of the styling of the Detail View last time, today I will adapt the corresponding Table View. Initial situation Remove links First I would like to remove the links so that the values in the table are shown as text, not as a link. I could and should have done this already during modelling, but I did not. So I have to do it in AppGini – field by field. Then save and regenerate. Except the file link (download) there are now only values in the table. If I want to open a record, I need …

AppGini Helper JavaScript Library / Javascript (JS) / JQuery / Programming

Styling a Detail View: a step-by-step example

Today I am going to take you on a trip from a default, generated detail view to a UI-modified detail view using the latest version of our AppGini Helper Javascript Library (which is 2020/10/26). Follow me! Start This is the default generated attachments detail view form (DV) with a couple of fields for uploading PDF files: Schema I’m using the following data model for this attachments table: attachments idprimary key task_idlookup tasks-table filefield for uploading pdf files filenamewill be filled automatically on insert descriptiontextare for descibing or tagging this file created_on created_by modified_on modified_by Create hooks file Create a new …

AppGini / AppGini Helper JavaScript Library / Javascript (JS) / JQuery / Programming / Webdevelopment

Quickie: Insert heading above (children-) tabs

Just a short script-fragment. A customer asked for a heading above children tabs. There is not much to do, and nothing complicated. Just add the following code to your hooks/TABLENAME-dv.js file and change the text between <h1> and </h1>. Code Result Tip: do not insert headline in insert-mode If you do not want to see it in insert-mode, just check if we are in insert-mode or not. Using our AppGini Helper Javascript Library there is a useful function isInsert() for this: Note the exclamation mark “!” right before dv.isInsert() function call: The exclamation mark means logical not. If it is …

AppGini / Javascript (JS) / JQuery

Quickie: Change values in table cells

In a table I have a calculated field that result in either 0 or 1. When scrolling down, because of the mass of data it is hard to see where the differences are. With a small javascript function I can change the values and highlight differences better. I show the result and the javascript code needed for it. Standard Table View Modified with only little code Standard Table View I have blurred out confidential data which is not relevant for this sample Did YOU notice the records having is_expired == 1? Modified Table View Check for yourself if you can …

AppGini / Javascript (JS) / JQuery / Programming