HireHop ist vollständig anpassbar, Sie können sogar benutzerdefinierte Felder hinzufügen, alles mithilfe der HireHop-JavaScript-Injektionsmethode, bei der von Ihnen geschriebene JavaScript-Dateien in HireHop-Seiten eingefügt werden. Wenn Sie sich die Seitenquelle einer HireHop -Seite ansehen, sehen Sie <!– PLUGINS –>, hier wird das JavaScript für Ihre Plugins eingefügt.

HireHop wurde von Grund auf aufgebaut und hat unser eigenes Framework entwickelt, das wir NoHTML nennen. Dabei wurden vorhandene Technologien und Methoden zusammengeführt, um ein Framework zu erstellen, das einfach zu verwenden und erweiterbar ist und ein schnelles Laden von Seiten auch bei langsamen Internetverbindungen ermöglicht.

Abgesehen vom Hauptteil der Seite werden die Hauptteile von HireHop dynamisch auf dem Client-Rechner mit JavaScript und jQuery-Widgets erstellt, ähnlich wie REACT und JSX, aber einfacher und natürlich mit dem bekannten jQuery-Framework. Wenn Sie beispielsweise eine Jobseite laden und die Seite überprüfen (drücken Sie F12 für den Objektinspektor des Browsers), sehen Sie unten auf der Seite ein <div>-Element, das wie folgt strukturiert ist:

<div id=“notes_tab„></div>

Wie Sie sehen können, ist <div> nur ein leeres div-Element. Wenn Sie auf die Registerkarte „Notizen“ klicken, wird das obige Element plötzlich mit Elementen gefüllt. Wenn Sie sich den Inspektor Ihres Browsers ansehen, werden Sie auch feststellen, dass die einzigen Daten, die vom Server geladen wurden, JSON waren und nicht der Code im Notizen-Tab. Der Notizen-Tab wurde dynamisch auf dem Client-Rechner mit einem benutzerdefinierten jQuery UI Widget namens $.notes() (intern $.custom.notes genannt) erstellt, das in der Datei /js/notes.js definiert ist, und dieses Widget verwendet ein Ajax Aufruf an den Server, um die Daten zum Auffüllen abzurufen.

Alle Widget-Dateien auf HireHop sind aus Geschwindigkeitsgründen komprimiert. Um jedoch die erweiterte Quelle anzuzeigen, fügen Sie einfach eine .MAX am Ende des Dateinamens hinzu, z. B. /js/notes.MAX.js.

Um JavaScript in Ihre Webseiten einzufügen, gehen Sie zu Einstellungen->Unternehmenseinstellungen und fügen Sie in Plugins die URL Ihrer JavaScript-Datei hinzu, die sich auf einem https-Server befinden sollte. Sie können mehrere URLs hinzufügen, die Sie mit einem „;“ trennen können. (Semikolon). Alle URLs müssen zu einer sicheren https-Domain führen.

Erweitern eines Widgets

Da es sich um jQuery-UI-Widgets handelt, können Sie eine Art objektorientierte Programmiertechnik verwenden, um Teile der HireHop-Widgets zu überschreiben. Zum Beispiel werden wir ein kleines Plugin erstellen, das ein Span-Element mit dem Wort Hello nach der Schaltfläche Aktualisieren im Notizen-Widget hinzufügt.

Erstellen Sie zunächst eine JavaScript-Datei auf Ihrem Webserver und fügen Sie den folgenden Code hinzu:

$(document).ready(function(){
// Überprüfen Sie, ob das Notizen-Widget vorhanden ist
if(typeof($.custom.notes)!=“undefined“ && hh_api_version<=1) {
// Notizen-Widget neu definieren
$.widget(„custom.notes“, $.custom.notes, {
_init_main: function() {
// Rufen Sie das alte _init_main . auf
this._super(arguments);
// Fügen Sie nach dem Aktualisieren-Button ein Hallo hinzu
$(„<span>„,{ html:“Hallo“ }).insertAfter(this.btnRefresh);
},
// Fügen Sie dem Widget sogar Ihre eigenen neuen Funktionen hinzu, wenn Sie möchten
new_function_name: function() { }
});
}
});

Der obige Code ist in einer Datei unter https://s.myhirehop.com/plugins/demo.js.

Den obigen Code Zeile für Zeile erklären:

$(document).ready(function(){
Zuerst warten wir, bis das Dokument fertig ist und alle Seitenelemente und JavaScript-Dateien geladen sind. In diesem Fall ist dies nicht erforderlich, da die Datei /js/notes.js vor dem Plugin-Skript geladen wird. Für dieses Beispiel haben wir sie jedoch als Referenz belassen.

if(typeof($.custom.notes)!=“undefined“ && hh_api_version<=1) {
Als nächstes testen wir, ob das Notizen-Widget definiert wurde, wenn ja, werden wir einen Teil davon überschreiben. Hier testen wir auch die HireHop-API-Version, die der Benutzer verwendet. Wenn neue Versionen von HireHop veröffentlicht werden, hat der Benutzer die Möglichkeit, sie zu verwenden, und dies stellt sicher, dass Ihr Plugin mit dieser Version kompatibel ist.

$.widget(„custom.notes“, $.custom.notes, {
Hier initiieren wir das Zusammenführen eines neuen JavaScript-Objekts, das Funktionen enthält, in das Notizen-Widget.

_init_main: function() {
Wird eine Funktion gleich wie eine vorhandene benannt, wird diese überschrieben.

this._super(arguments);
Dies ruft die geerbte Funktion auf, die die Funktion ist, die wir überschreiben.

$(„<span>“,{ html:“ Hello“ }).insertAfter(this.btnRefresh);
Anschließend fügen wir ein einfaches Span-Element hinzu, das das Wort „Hallo“ hinter der Schaltfläche „Aktualisieren“ enthält. Sie können auch  $(„<span> Hello</span>“).insertAfter(this.btnRefresh); verwenden. Um Elemente zu adressieren, sollten Sie immer die den Elementen zugewiesenen Variablen verwenden und niemals die Element-IDs, da die meisten IDs auf HireHop dynamisch erstellt werden und bei jeder Instanz unterschiedlich sind. Wenn die Element-ID Zahlen enthält oder nicht gut benannt ist, verwenden Sie sie auf keinen Fall.

new_function_name: function() { }
Schließlich macht dies nichts und ist für das, was wir tun müssen, nicht erforderlich, es zeigt nur, dass Sie sogar Ihre eigenen Funktionen in das Widget einfügen können.

Wenn Sie die HireHop-Seite neu laden, sehen Sie nach der Schaltfläche „Aktualisieren“ das Wort „Hallo“, wenn Sie alles richtig gemacht haben.

Versionierung

Ein großer Vorteil der Verwendung des HireHop–NoHTML-Frameworks besteht darin, dass das gesamte JavaScript zwischengespeichert wird, was zu einem schnellen Laden der Seite führt, da der Browser die JavaScript-Dateien in seinem Cache verwendet. Dies kann problematisch sein, wenn Sie Ihr Plugin aktualisieren, da alle Benutzer, die es verwenden, ihre Browser nicht die aktualisierte Version herunterladen, sondern stattdessen ihre zwischengespeicherte Version verwenden, es sei denn, sie löschen ihren Browser-Cache.

Um dies zu umgehen, können Sie beim Hinzufügen Ihrer JavaScript-URLs zu den Plug-in-Optionen einen Versionierungsparameter verwenden, z. B. für https://www.mywebsite.com/plugin.js geben Sie ihn als https://www.mywebsite.com/plugin.js?v=1. Nach einem Update können Sie es in https://www.mywebsite.com/plugin.js?v=2 ändern, wodurch alle Browser gezwungen werden, die JavaScript-Datei von Ihrem Server neu zu laden. Wenn Sie keinen Server zum Speichern des Codes haben, können Sie jederzeit GIST oder Google Open Source verwenden.

Arbeitsdemo

Wenn Sie in Ihren Plugins unter „Einstellungen->Unternehmenseinstellungen“ den Pfad „https://myhirehop.com/plugins/navigation_menu.js“ hinzufügen, sehen Sie oben rechts auf Ihrem Bildschirm ein Navigations-Kontextmenü. Wenn Sie sich den Quellcode ansehen, können Sie sehen, wie dieses grundlegende Plugin funktioniert.

Bitte beachte, dass Plugins aus Sicherheitsgründen nicht auf der Einstellungsseite geladen werden und nur geladen werden, wenn du ein kostenpflichtiges Abonnement hast.

You can have an unlimited number of custom fields in HireHop specific to each record, a record being a job, project, test/service, asset, etc.  All custom fields can be used in documents, as long as they exist, otherwise they will just be blank.

Currently custom fields are only fully supported in Jobs and Projects. Custom fields can only be used using plugins.

Custom Fields Structure

When fetching a custom field for the currently edited record, there is a function called _get_custom_field_value(field) which will return NULL if the field is not set, a string, or a JavaScript object, depending on how you saved it.

You probably should save custom fields as a JavaScript object (like JSON) in the following format for more printing control, as if it is just a string, HireHop will treat it as a string:

"field_name" :
{
"value"  : "The value of the field",
"type"   : "The field type, default is text, it can also be number, currency, text, date, html and array"
"format" : "For date type only, eg "ddd, dddddd tt" // = "Mon, January 1 2017 12:00"
}

• value is the value of the field in any format.
• type tells HireHop how the field should be treated when merging it into a document. An array field will be displayed as JSON.
• format tells HireHop how to format the field in the document, currently only available dates and is dependent on the users settings and how their date and time formats are set:
  • dddddd for a long date (like January 1 2018)
  • ddddd for a short date (like 01/01/2018)
  • dddd for the day of the week (like Monday)
  • ddd for the short day of the week (like Mon)
  • tt for the time (like 12:36 am).

The format part is only needed for dates and if it is not set, nothing will show.  You can merge formats together and add separators, for instance you can use dddd, dddddd tt which will give „Monday, January 1 2018 12:00“ if the user has set a date order as day month year. The value for a date type must be stored in the yyyy-mm-dd hh:mm format.

If you just save the field as a string and not a JavaScript object, that’s fine, HireHop will just treat it as a string.  Saving your custom fields as a JavaScript object will give you greater control, especially when HireHop prints them in a document.

Saving The Custom Fields

On all edit forms that support custom fields, there is a function called _save_custom_field_value(field, value).  This stores your fields to be saved later.  If you can’t find the function, please contact us.

Please note, that all changes must be written prior to saving.

When the custom fields are saved, they are merged with the existing fields, and any new fields passed with the same name as any existing ones, the new values will be set.

When saving the custom fields, for example using /php_functions.job_save.php directly as an API call, only parameters set will be updated, so if you only set the custom_fields post parameter, only the custom fields will change, all the other fields will stay as is.

Printing Custom Fields

All custom fields can be incorporated into documents just like normal fields and are prefixed with a single „_“ (underscore) character.  For example, for a custom field in a job called „field_name“, you would load it by using the merge field „job:_field_name„.

Naming Custom Fields

Some custom fields in documents merge fields together, for example tests merge with an asset in some document fields, so be careful not to use the same field name in an asset and a test.  Also, other plugins maybe added in the future written by yourself or from another source, so add a prefix that denominates you, for example plugins written HireHop by use the „hh_“ prefix, so a field written in a plugin by us might be called „hh_NewName“.  Field names in document merges are not case sensitive, but they obviously are in JavaScript.

Searchable Custom Field

There is an additional field called CUSTOM_INDEX, that can be used for searching, filtering and listed in search results.  The field is a 45 character string value that can be set to NULL. To enable the field to be shown in the search results on the home page, change the allSearchCols global JavaScript variable by adding CUSTOM_INDEX to it:

if(allSearchCols.constructor===Array && doc_type==0 ) {
allSearchCols.push("CUSTOM_INDEX");
}

There is also a language setting for the custom field displayed name:

if(typeof(lang["customIndexTxt"])=="undefined" || lang["customIndexTxt"]=="") {
lang["customIndexTxt"] = "Custom field name";
}

The reason for the testing for undefined or blank above is just in case the user has set it in the language.

You can use the custom searchable field in the page by adding a lookup in the page or the editor.  On jobs there is a hidden tile that displays the  CUSTOM_INDEX field and can be shown and utilised like so in a plugin:

$("#job_tile_custom_index")
.show()
.click(function() {
window.open("https://www.my_external_app.com?id="+job_data["CUSTOM_INDEX"],"newwindow");
});

To save the CUSTOM_INDEX field in the relevant edit widget, using a custom plugin you can add a form element into the edit widget, for example like so:

// This adds the CUSTOM_INDEX field into the job edit widget
if(typeof($.custom.job_edit)!="undefined") {
// Redefine job_edit, move name to after telephone
$.widget("custom.job_edit", $.custom.job_edit, {
_init_main: function() {
// Call the old _init_main
this._super(arguments);
// Add an extra edit in the job edit
var table = this.default_disc.closest("table");
var tr = $("<tr>").appendTo( table);
$("<td>", { html: lang.customIndexTxt+ " :" }).appendTo(tr);
$("<input>", {
"name" : "custom_index", // Parameter to pass when saving
"class" : "data_cell",   // Setting class to data_cell tells HireHop it is a standard data field
"data-field" : "CUSTOM_INDEX", // Name of the field
"maxlength" : 45         // The CUSTOM_INDEX has a maximum length of 45 characters
})
.appendTo( $("<td>").appendTo(tr) );
// Change the memo height to compensate
this.job_edit_memo.height(110);
}
});
}

The CUSTOM_INDEX field is called xxx:custom_index in the document and is passed as a string into the document.

Global Custom Fields

Occasionally you might want to store a global counter, etc. for the whole company.  To read and store global custom fields use /php_functions/custom_fields_global_load.php and /php_functions/custom_fields_global_save.php.  Saving the data, you need to pass either a json string or json array:

$("#saving_dialog").dialog("open");
// This adds the CUSTOM_INDEX field into the job edit widget
$.ajax({
url: "/php_functions/custom_fields_global_save.php",
type: "post",
dataType: "json",
data: {
"fields":{"my_field":"any type of value"}
// or a json string
// "field":'{"my_field":"any type of value"}'
},
success: function(data)
{
$("#saving_dialog").dialog("close");
// HireHop reported an error
if(typeof(data.error) !== "undefined")
error_message(isNaN(parseInt(data.error)) ? data.error : lang.error[data.error]);
else
{
// All good, "data" is a javascript object (JSON) of all global custom fields
}
},
// Handle an http error
error: function(jqXHR, textStatus, errorThrown)
{
$("#saving_dialog").dialog("close");
error_message(lang.error[1]+" ("+errorThrown+").");
}
});