0

Is it possible to have choice and multi choice fields where editors can enter new values directly into the field, rather than having to pre-define all values?

Something like the “select” and “multi select” fields in Notion.

8 replies

null
    • Ninox developper
    • Jacques_TUR
    • 3 yrs ago
    • Reported - view

    Not in native Ninox yet (I hopefully later !?). 

    You must to use linked fields or... html function with (lot of) code like JavaScript. This code, tested in Invoice template, create new dropdown list form “Customer” table and update link with « Invoice.Customer“ field.

    Before to use, you must to replace ”YOUR API KEY“, ”YOUR TEAM ADDRESS“ and ”YOUR DATABASE ADDRESS“.

     

    -------

    let StrAddLines := ”“;
    let NumID := Customer.ID;
    let Sel := 0;
    let i := 0;
    for t in select Customer do
    StrAddLines := StrAddLines + ”option = document.createElement(“option”);
      option.text = “” + t.“First Name” + “ ” + t.“Last Name” + “”;
      option.id = “ + t.ID + ”;
      x.add(option);
    “;
    if t.ID = NumID then Sel := i end;
    i := i + 1
    end;
    let StrHTML := ”
      <select class=“stringeditor” style=“width:100%;height:28px” id=“ComboBox”  onchange=“SendToNinox()”>
    </select>

    <script>

    var x = document.getElementById(“ComboBox”);
    var option;

    “ + StrAddLines + ”

    x.options.selectedIndex = “ + Sel + ”;

    function SendToNinox() {

    // Ce code a été généré automatiquement par l“application AdvancedRestClient.
    // Elle peut aussi générer du code en CURL, HTTP, PYTHON, C ou JAVA.
    const headers = new Headers();
    // La clef Bearer est confidentiel. Idéalement, elle ne devrait pas appraitre dans le code pour éviter le piratage de la base Ninox par des automates.
    headers.append(”Authorization“, ”Bearer YOUR API KEY“);
    headers.append(”Content-Type“, ”application/json“);

     
    // Ci-dessous, les tableau à remplir avec les champs et les données  du formulaire
    const bodyJSON = { ”id“:” + this.ID + “, ”fields“: {
        ”Customer“: x.options[x.options.selectedIndex].id
      }
    };

    const body = JSON.stringify(bodyJSON);

    const init = {
      method: ”POST“,
      headers,
      body
    };

     

     

    // Envois de la fonction POST avec les paramètres crée en constante au-dessus 
    fetch(”https://api.ninoxdb.de/v1/teams/YOUR TEAM ADDRESS/databases/YOUR DATABASE ADDRESS/tables/B/records“, init)
    .then((response) => {
    //alert(”response“+JSON.stringify(response));
      return response.json(); // or .text() or .blob() ...
    })
    .then((text) => {
     
     // alert(”ID : “+x.options[x.options.selectedIndex].id+ ” text:“+text.id);
      // text is the response body
    })
    .catch((e) => {
      // error in e.message
    alert(”erreur“);
    });
     

     

    }
     

    </script>

     

    ”;
    html(StrHTML)

     

    • -
    • Thomas.1
    • 3 yrs ago
    • Reported - view

    Thanks for your response, Jacques! I couldn“t figure out how to implement, though. I couldn”t find a html function? Could you please clarify... sorry, I am a noob 😅 Also, the images you posted aren“t displaying for me. Any help would be greatly appreciated!

    Hopefully Ninox adds this basic feature natively, soon.

    • Ninox developper
    • Jacques_TUR
    • 3 yrs ago
    • Reported - view

    Hi Thomas,
    This forum is broken. we can no longer load images. If you want it, send me your email at : jacques.tur@neuf.fr

    I updated my code. Now you must put this code in Options->Global scripts :


    -------------------------------------------
    Gestion des échanges API
    -------------------------------------------
    ”;
    function GetAPICode() do
    YOUR API KEY”  
    end;
    function GetLienTable(NomDeTable : text) do
    “https://api.ninoxdb.de/v1/teams/” + teamId() + “/databases/” + databaseId() + “/tables/” + tableId(NomDeTable)
    end;
    function GetLienEnregistrement(NomDeTable : text,RecordId : number) do
    GetLienTable(NomDeTable) + “/records/” + RecordId
    end;
    function GetLienFichier(NomDeTable : text,RecordId : number,NomFichier : text) do
    GetLienEnregistrement(NomDeTable, RecordId) + “/files/” + NomFichier
    end;

    -------------------------------------------
    Création de ComboBox HTML
    -------------------------------------------
    ”;
    function GetComboBoxByArray(TableDest : text,RecordIdDest : number,FieldDest : text,ArrayOfSourceId : text,ArrayOfSourceLabel : text,FieldDestIdValue : number) do
    let StrAddLines := “”;
    let ComboBoxId := FieldDest + text(RecordIdDest);
    let ArrOfId := split(ArrayOfSourceId, “,”);
    let ArrOfLabel := split(ArrayOfSourceLabel, “,”);
    for Num from 0 to count(ArrOfId) do
    StrAddLines := StrAddLines + “<option id=” + number(substr(text(item(ArrOfId, Num)), 1));
    if number(substr(text(item(ArrOfId, Num)), 1)) = FieldDestIdValue then
    StrAddLines := StrAddLines + “ selected”
    end;
    StrAddLines := StrAddLines + “>” + item(ArrOfLabel, Num) + “</option>

    end;
    let StrHTML := “
    <select class=”stringeditor“ style=”height: 100%; width:100%; overflow:visible; padding:0px; background:none; padding-left:5px“ id=”“ + ComboBoxId + ”“  onchange=”SendToNinox()“>
    ” + StrAddLines + “
    </select>
    <script>

    var x = document.getElementById(”“ + ComboBoxId + ”“);
    var p = x.parentNode;
     
    p.style.overflow = ”visible“;
    p.style.padding = ”0px“;
    p.style.margin = ”0px“;

    function SendToNinox() {
    // Ce code a été généré automatiquement par l”application AdvancedRestClient.
    // Elle peut aussi générer du code en CURL, HTTP, PYTHON, C ou JAVA.
    const headers = new Headers();
    // La clef Bearer est confidentiel. Idéalement, elle ne devrait pas appraitre dans le code pour éviter le piratage de la base Ninox par des automates.
    headers.append(“Authorization”, “Bearer ” + GetAPICode() + “”);
    headers.append(“Content-Type”, “application/json”);

     
    // Ci-dessous, les tableau à remplir avec les champs et les données  du formulaire
    const init = {
      method: “POST”,
      headers: {“Authorization”: “Bearer ” + GetAPICode() + “”, 
      “Content-Type”: “application/json”},
      body: JSON.stringify(
     { “id”:“ + RecordIdDest + ”, “fields”: 
    { “” + FieldDest + “”: x.options[x.options.selectedIndex].id }
     })
    };

    // Envois de la fonction POST avec les paramètres crée en constante au-dessus 
    fetch(“” + GetLienTable(TableDest) + “/records”, init)
    .then((response) => {
    //alert(“response”+JSON.stringify(response));
      return response.json(); // or .text() or .blob() ...
    })
    .then((text) => {
     
    // alert(“ID : ”+x.options[x.options.selectedIndex].id+ “ text:”+text.id);
     // text is the response body
    })
    .catch((e) => {
     // error in e.message
    alert(“erreur” + e.message);
    });
     
    }
    </script>“;
    StrHTML
    end

    • Ninox developper
    • Jacques_TUR
    • 3 yrs ago
    • Reported - view

    After, you create one formula field (Fx) and you put this code in « formula » :

    html(GetComboBoxByArray(“Invoice”, number(this.ID), “Customer”, string((select Customer).ID), string((select Customer).(“First Name” + “ ” + “Last Name”)), number(Customer.ID)))

     

    The GetComboBoxByArray function have 6 parameters :

    - TableDest : text // it is the name of your table destination

    - RecordIdDest : number // the record Id in TableDest. Usualy this.Id

    - FieldDest : text // The field de TableDest wich recieve the result of selection

    - ArrayOfSourceId : text // Id list of source table. When user will select one line, the id be put on FieldDest. Each Id matching with the corresponding label on ArrayOfSourceLabel. Both table must be have same number of lines

    - ArrayOfSourceLabel : text // Label list od source table wich will be displayed on the list

    - FieldDestIdValue : number // initial value of field destination to préselect item on list.

    function return the HTML code of CmoboBox with data update by API.

    • UweG
    • 3 yrs ago
    • Reported - view

    Salut Jaques
    Can you send me the code of the Global Function via email: foren.uwe@gmx.de or put it in a demo database incl. table/fields in the english webinar team. Copy and paste will not longer work in this forum, cause the forum software change the code.
    It sounds interesting and i“d like to test it. Maybe i can put it in the example table of the ninox reference database for all users.

    • CISOFT_Sarl
    • 3 yrs ago
    • Reported - view

    Salut Jacques, si tu mets une demo dans le webinar, tu pourrais aussi me dire quelle base de données c“est? Ca m”interesse aussi car je tourne bcp autour du js et de ninox. Merci d“avance. Robert

    • Ninox developper
    • Jacques_TUR
    • 3 yrs ago
    • Reported - view

    (I wrote in english for all other people, although my English is not very readable 😂)

    Hi Robert, Uwe will put data base on Webinar. But if you send me your email, I can forward you my DataBase exemple.
    And, if you allright to work together, I can share it you on team to improve it together. I am intereset to create another function in JS to collect and put data by API.
    I want to create html forms to get and send Ninox data for any of my client.
    I tryied to use Google Form and Zapier to do. I can create data easily but it seem diificult to update data. Moreover, Google Form is not made to display previus data.

    • CISOFT_Sarl
    • 3 yrs ago
    • Reported - view

    Hi Jacques, thanks for mesage and my email : r.traykoski@cisoft.ch

    I have from many time trayed to create a daschboard for all my app, and i think it is possible with the API. 

    We can get in touch for next shared informations. Have a nice day. Robert. 

Content aside

  • 3 yrs agoLast active
  • 8Replies
  • 1306Views