Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

is it possibe to enter Dynamic property names by user #226

Closed
gunasekharravilla opened this issue Aug 18, 2021 · 11 comments
Closed

is it possibe to enter Dynamic property names by user #226

gunasekharravilla opened this issue Aug 18, 2021 · 11 comments
Assignees
@jerosoler
Labels
question Further information is requested

Comments

@gunasekharravilla
Copy link

image

i want to keep df-{dynamic property name } entered by user
@jerosoler jerosoler self-assigned this Aug 18, 2021
@jerosoler jerosoler added the question Further information is requested label Aug 18, 2021
@jerosoler
Copy link
Owner

Hi @gunasekharravilla

You can use this method to pass new variables to the module.
updateNodeDataFromId view https://github.com/jerosoler/Drawflow#methods
Which will also have to update the module's html. View for update new html: #40

Although it is a bad idea to leave the user, since the user can put blank characters, accents, strange characters ...

@gunasekharravilla
Copy link
Author

not leaving completely by clicking add button new row will be displayed then they will type what is the property name and value

@jerosoler
Copy link
Owner

Then you will have to use the commented function. updateNodeDataFromId

@gunasekharravilla
Copy link
Author

gunasekharravilla commented Aug 18, 2021 •
edited

provide sample html code for 1 row please🙏

@jerosoler
Copy link
Owner

The example is very simple. In this case it only works with node ID 1

View a simple example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"
    />
    <script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
    
    <style>
    
      #drawflow {
        position: relative;
        width: 600px;
        height: 600px;
        border: 1px solid red;
      }

      </style>
  </head>
  <body>
        <div id="drawflow"></div>  
        <button onclick="exportdf()">Export</button>
    <script>

          var id = document.getElementById("drawflow");
          const editor = new Drawflow(id);
          editor.reroute = true;
          editor.reroute_fix_curvature = true;

          editor.start();


        const htmltest = `<button onclick="addinput()">+</button>`
        editor.addNode('test', 1,1, 50, 100, 'test', {}, htmltest );


        function addinput() {
            document.querySelector("#node-1 .drawflow_content_node").innerHTML = `<input type="text" df-name>`;
            editor.drawflow.drawflow.Home.data[1].html = `<input type="text" df-name>`;
            editor.updateNodeDataFromId(1, { name: "hi!!!"});

        }

        function exportdf() {
            console.log(editor.export());
        }

    </script>
   
  </body>
</html>

@gunasekharravilla
Copy link
Author

thank you so much

But i am trying to keep df-name as dynamic which is entered by users for few rows in <input type="text" df-name>

@jerosoler
Copy link
Owner

Change 'name' for your variable

@gunasekharravilla
Copy link
Author

actually my query was when a user click plus button new row have to display with two text inputs one is property and value

both should be exported to json { property : value }

@gunasekharravilla
Copy link
Author

The example is very simple. In this case it only works with node ID 1

View a simple example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"
    />
    <script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
    
    <style>
    
      #drawflow {
        position: relative;
        width: 600px;
        height: 600px;
        border: 1px solid red;
      }

      </style>
  </head>
  <body>
        <div id="drawflow"></div>  
        <button onclick="exportdf()">Export</button>
    <script>

          var id = document.getElementById("drawflow");
          const editor = new Drawflow(id);
          editor.reroute = true;
          editor.reroute_fix_curvature = true;

          editor.start();


        const htmltest = `<button onclick="addinput()">+</button>`
        editor.addNode('test', 1,1, 50, 100, 'test', {}, htmltest );


        function addinput() {
            document.querySelector("#node-1 .drawflow_content_node").innerHTML = `<input type="text" df-name>`;
            editor.drawflow.drawflow.Home.data[1].html = `<input type="text" df-name>`;
            editor.updateNodeDataFromId(1, { name: "hi!!!"});

        }

        function exportdf() {
            console.log(editor.export());
        }

    </script>
   
  </body>
</html>

How to do this for selected nodes

@jerosoler
Copy link
Owner

Use events nodeSelected and nodeUnselected to get id of node selected.

Or

const nodeId = editor.node_selected;

@gunasekharravilla
Copy link
Author

actually my query was when a user click plus button new row have to display with two text inputs one is property and value

both should be exported to json { property : value }

Any solution to export user edited property name

@jerosoler jerosoler mentioned this issue Jan 25, 2023
Closed
@jerosoler jerosoler mentioned this issue Dec 12, 2023
Open
@jerosoler jerosoler mentioned this issue Jan 29, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jerosoler jerosoler

Labels
question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jerosoler @gunasekharravilla