Productivity Tips & Tricks


#1

There are many small little things that we as a community have learned along the way that will help all users that have not encountered these oddities as yet. In an effort to assist them and ensure the same or similar questions are asked less often I would like to request that users add their tips and tricks to this post which I will try to keep clean and tidy as it grows.


 
Tip 1: Use the default('') data formatter when you have a dynamic table with sorting AND/OR paging applied, as your query to your database, because your database might contain NULL or empty fields, otherwise Wappler ignores NULL or empty values for a speed advantage, and in certain cases your data displayed might seem incorrect or muddled up.

<!-- EXAMPLE USAGE -->
{{your_dynamic_binding.default('')}}

References: MySQL NULL requires the .default('') formatter, Data from the wrong records being displayed, Sorting with blanks, copies values - bug?


 
Tip 2: Do not use Hyphens (Dashes) inside IDs within your client side, you may use CamelCase or replace hyphens with under_scores if you prefer.

References: https://community.wappler.io/t/872/1


 
Tip 3: Use [] in multi file uploads to turn the file input field into an array.

<!-- EXAMPLE USAGE -->
<input name="file_upload_multi[]" id="file_upload_multi" type="file" multiple="" data-rule-maxfiles="3" data-msg-maxfiles="Please select no more than 3 files." required="" data-rule-maxsize="10000000" data-msg-maxsize="Please select a file of no more than 10MB." class="form-control-file" accept=".png,.jpg,.gif,.pdf">

I have included quite a few parameters to my input to control aspects of the upload, such as Maximum File Size, Maximum files selected, Allowed File Extensions etc. for your quick reference.

If your Server Connect Globals > $_POST variables were already created before adding [] to the input name parameter then please ensure the $_POST variable is correct.
00


 
Tip 4: Use toNumber() as a data formatter in situations where the output has to be a number to perform calculations on. Returned data in Wappler is always set to string, so it can not calculate until you convert it to a number.

<!-- EXAMPLE USAGE -->
{{your_dynamic_binding.toNumber() + your_second_dynamic_binding.toNumber()}}

If your_dynamic_binding returned 5 and your_second_dynamic_binding returned 3 then the output from the above command would return 8


 
Tip 5: When entering data in the App Connect or Server Connect side it is a good idea to use the TAB key to apply the addition/alteration, as sometimes hitting ENTER or saving without first tabbing seems to revert your additions/alterations.

References: Enter key vs Tab key now works with either
UPDATE: This seems to be resolved within one of the later updates, so ENTER should now work as expected.


 
Tip 6: If you have already added a database connection step inside the Server Connect side of Wappler, and linked it site wide, but you have a need to go back to your SQL and make table structure alterations, make sure to go back to your Database Connection step, in any of your Server Connect action files and click Connection Options, and save to refresh your Database, to reflect the alterations made.

Wappler 1.7.1 has changed the way this works, you can now click the “Refresh Schema” button from any Query Builder window you have open.


 
Tip 7: Set checkbox value to 1 on login forms that include a “remember me” checkbox, otherwise the cookie is not actually set and your users will be logged out much sooner than anticipated.

References: Setting Checkbox value to 1 for "Remember Me / Keep me logged in" value


 
Tip 8: You can not decode a HASHed password to remind users that forgot their password.

References: Encrypted SHA256 Hash with SALT - Decrypting


 
Tip 9: CSV files created from Server Connect include a first hidden character called the Byte Order Mark (BOM), which you have no control over, therefore if you use any custom code to merge multiple CSV files into a single larger CSV file, your final CSV file will include multiple BOM characters, which will stop the file from working on most CSV importing applications.

If you want to check a CSV file for BOM characters, use an application that does not ignore or hide them such as the “Edit” command inside the cPanel > File Manager.


 
Tip 10: A lightbox does not display the preview contents of a PDF file.

References: PDF thumbnail and viewer


 
Tip 11: Multiple actions placed on a single event, such as “onclick” will process in the order you place them, ie: sequentially, however each action will not wait for the last action to complete before the next action starts. It is always a good idea to use onsuccess or ondone event listeners in situations where one of your actions requires an output from one of the other actions in your list.

References: Order of commands


 
Tip 12: You can use the Export to CSV server action to also export to XLS, by just changing the saved file extension to .xls. Please Note: This is not the correct, or ideal way of doing this, but when the user opens the output file, it does open correctly inside Microsoft Excel.


 
Tip 13: Console errors about .map files are internal Wappler debugging files, please ignore those console errors if you do happen to see them.

References: Source Map Error Modals and Alerts


 
Tip 14: When using a login form on your page, attached to a login server action, you have the option to set a cookie to add “remember me” functionality. The default settings in the Server Connect pane allows for an Expire to be added which is set in days.

If however you have a particular need to get around this, and have an Expire set to 30 minutes rather, you can just ignore adding a checkbox to the login form rather, which will ensure no cookie is set from Server Connect. This will then default to whatever session timeout is set by your hosting provider and can be altered in your php.ini file.

If you would like to check what your server settings are, just create a new file with the following code inside and ensure it is uploaded to your server.

<html>
  <head>
    <meta charset="UTF-8">
    <title>PHP INFO</title>
  </head>
  <body>
    <?php echo phpinfo(); ?>
  </body>
</html>

Make sure to save this file with the extension .php please and use your browser to navigate to it, which will show your server info like this.
Session timeout (session.gc_maxlifetime) is set to 1440 seconds (24 minutes)

References: Security Provider Cookie Options
Credits: @Hyperbytes


 
Tip 15: There are multiple ways to use variables in Wappler.
Start by adding a normal variable from the Data > Variable, set a unique ID and then you can either leave it with no value which you can set later from the output of a secondary action, or set the value right away if you know what you want.

Please Note: The standard component adds a value to the variable by using dmx-bind:value="" and not value="".

Examples

//Create variable with no value, to be set later
<dmx-value id="var1"></dmx-value>
<a href="javascript:void(0);" class="btn" dmx-on:click="var1.setValue(125)">CLICK ME</a>
{{var1.value}} //outputs: 125 after button is clicked

//Create variable with a dmx-bind:value set, wrapped in single quotes as it is a string
<dmx-value id="var1" dmx-bind:value="'Hello World'"></dmx-value>
{{var1.value}} //outputs: Hello World

//Create variable with a dmx-bind:value set, no single quotes as it is a sum
<dmx-value id="var1" dmx-bind:value="1+1"></dmx-value>
{{var1.value}} //outputs: 2

//Create variable with normal value set to store php
<dmx-value id="var1" value="<?php echo 1+1; ?>"></dmx-value>
{{var1.value}} //outputs: 2

//Create variable with a dmx-bind:value set as an array of values
<dmx-value id="var1" dmx-bind:value="[2,4,6,8,10]"></dmx-value>
{{var1.value}} //outputs: 2,4,6,8,10
{{var1.value[0]}} //outputs: 2

 
Tip 16: Most Linux servers are case sensitive. always check the case of paths and files match.

References: Dynamic images?
Credits: @Hyperbytes


 
Tip 17: Sometimes your hosting provider is badly setup and their caches cause issues with updating alterations made to stylesheets especially, update your stylesheet link to one of the below to avoid this issue.

Workaround 1: This will never use the cache.

<link rel="stylesheet" type="text/css" href="/my-styles.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">

Workaround 2: This will use the cache for all the visitors, but update it on each update/save - Credits: @UKRiggers

<link rel="stylesheet" type="text/css" href="../css/dgsitestyle.css?ver=<?php echo filemtime('../css/dgsitestyle.css'); ?>">

References: External CSS with certain hosting providers This thread also contains more information provided by @patrick so is worth a read if you ever have cache related woes.


 
Tip 18: If you are using file upload steps in Server Connect then it is best to make sure you are aware of what maximum file sizes your server will allow you to upload.

You can find this information from using the php info command used in Tip 14 above.

You can adjust the sizes by either editing your php.ini file on your server or if your server supports it, which most linux hosts do, you can use my preferred method.

Create a new file at the root /public_html/ directory of your server named .user.ini and enter the following code inside it, adjusted to suit your needs if you like.

memory_limit = "500M"
upload_max_filesize = "128M"
post_max_size = "256M"
max_execution_time = 600
max_input_time = 600

Save your file, and you should be done.


 
Tip 19: When working with .htaccess files or .user.ini files please be aware that these files start with a . which by default makes them hidden files.

On a mac you can toggle view/hide all hidden files with a simple keyboard shortcut of CMD+SHIFT+.

On most cPanel systems with a built in "File Manager:, you can find a checkbox in the “File Manager” settings pane to show hidden files.

Most FTP Applications also have a setting to adjust this.


 
Tip 20: You can use the Bootstrap 4 Form Generator to build your own custom form without the need for any Server Action at all. Just ignore the entire top section and click the + button to add all the form fields you want, and adjust according to your needs.



How to troubleshoot sorting
Wappler Official Documentation
Sort headers in bootstrap 4 table responsive
Uploading Single File To Your Server
Table cells not clearing
#2

Tip 21: Medium Editor formatting buttons pop up as they should but do not do anything when Medium Editor is in a modal. It is the default tabindex="-1" property of bootstrap 4 modals which causes the issue with the editor. Removing it should fix this


assigned psweb #5

#6

Just so everyone is aware, as I think up new tips I am just adding them to the original post to try keep the thread clean, so check back from time to time as things could have been updated